2020 BLACK Flarum Theme

琢磨着~ 是否要弄个暗夜风格,还是正常的那种。。。
我已经是一个成熟的人了,还要什么选择!
本主题需搭配夜间模式使用,白夜模式正在琢磨中…


HOT TO INSTALLATION | 如何使用该风格

copy this code to your Appearance >> Custom Styles
复制这些片段的代码至你的后台管理中的外观>>样式

Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/319-2020-black-flarum-theme
Link: https://discuss.flarum.org/d/22774-2020-black-flarum-theme-by-yannisme
声明: 如果您对 !important 介意,请不要使用此主题,请自己码,谢谢!


UPDATING | 内容更新

Welcome to give me some inspiration or a bug, I will do it all day.
谢谢你能给我一些建议或者BUG,我会仔细check的!Great?😅

  • Feb. 12, 2020 第一版发布
    Adapt to IPhone dark night mode
    适配IPhone暗夜模式
  • Apr. 7, 2020
    优化部分代码并修改了背景图片地址
    [https://kuoxo.com/images/flarum/color-background.png]

CONTRIBUTING | 贡献

Yannisme - Just me 😀
这就是我 😀


SUGGESTIONS | 建议

💡 It needs Dark Mode
💡 本主题需搭配夜间模式使用

Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
颜色搭配,第一种作为突出显示颜色,第二种作为背景元素样式。
Colors #93d1ce , #fff

✅ please Dark Mode
✅ 勾选 夜间模式


CONTENT | 主题代码内容

Apr. 7, 2020 🌟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: @config-primary-color;
}
::-webkit-scrollbar-track {
background: #EDEDED;
}
.Search-input:before {
display:inline-block;
font-size:inherit;
text-rendering:auto;
content:"\f002";
float:left;
margin-right:-36px;
width:36px;
font-size:14px;
text-align:center;
position:relative;
padding:7px 0;
line-height:1.5;
pointer-events:none;
background: #0000000f;
color:#fff;
border-radius:4px 0 0 4px
}
.Search-input input {
float:left;
width:225px;
padding-left:50px;
padding-right:32px;
-webkit-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
box-sizing:inherit!important
}
@media (min-width:768px) {
.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags{margin-right: 0;
position: inherit;
padding-right: 10px
}

.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags {
transition: none;
-webkit-mask-image: none
}
}

body {
font: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.Alert {
background: #212121;
}

.Hero {
background: #000000 url(https://kuoxo.com/images/flarum/color-background.png);
}

.Hero h2,.Hero-subtitle,.App-header .Button {
font-weight: 600;
}

h3.DiscussionListItem-title {
font-size: 18px;
}

.sideNav .Dropdown--select .Dropdown-menu>li>a {
font-size: 14px;
}

.containerNarrow {
color: #1a1a1a;
}

.App-header .Button {
color: #93d1ce;
font-size: 16px;
}

.App-header .Button:hover {
color: #fff!important;
}

.App-header,.App-header a {
color: #fff;
font-weight: 700;
}

.DiscussionListItem-title,.UserPage .DiscussionListItem-title {
color: #ededed;
}

.DiscussionListItem {
margin-top: 15px;
}

.DiscussionListItem:hover {
background: #17212047;
box-shadow: 0 2px 6px #00000052;
}

h2.DiscussionHero-title,.PageHero-title>a {
color: #1a1a1a;
}

.DiscussionList-loadMore .Button {
width: 80%;
background: #00000040;
}

SCREENSHOTS | 效果截图

Apr. 7, 2020

image.png

image.png

image.png

OTHERS | 其他搭配:

暂无