1
2
3
4
5
6
7
8
@media (prefers-color-scheme: dark) {
:root {
}
}
@media (prefers-color-scheme: light) {
:root {
}
}
这是一个 CSS 媒体查询（media query），用于检测用户是否喜欢 暗色主题。这个媒体查询使用 prefers-color-scheme 特性（feature），该特性用于指示用户的首选主题是明亮还是暗黑（dark）。如果支持 dark 特性且用户首选暗色主题，则这个媒体查询的条件将为真，浏览器将应用其中的 CSS 样式。
如果媒体查询条件为真，就会选择 CSS 选择器 :root。在 CSS 中，:root 表示文档树的根元素，通常是 <html> 标签。这里使用 :root 选择器来设置网页的根元素的 CSS 变量值。通过设置这些变量，我们可以在不同的主题之间切换，并根据主题选择不同的颜色、背景、字体等。
本 blog 使用的 Hux 主题，但是他没有设置暗黑主题色，为了更适合晚上观看，修改代码适合晚上观看。
自己瞎折腾尝试修改的，并不懂前端可能有 bug 具体也不清楚，目前使用一切正常。记录代码是为了方便后期自己还需要修改，节省时间参考。
本站添加部分代码如下：
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
@media (prefers-color-scheme: dark) {
:root {
--main-color: #ce5654; /* 主色调 */
--bg-color: #181818; /* 暗黑主题色 */
--main-context-color: #bfbfbf; /* 文章文字 */
--text-navbar: #bfbfbf; /* 导航菜单 */
--catalog-body-color: #000000; /* 文章侧目录 */
--hr-border-color: #282828; /* 分割线 */
--search-page: #181818; /* 搜索页背景 */
--search-text: #bfbfbf; /* 搜索字 */
--search-bar: #181818; /* 搜索框背景 */
--navbar-collapse-background: #181818; /* 导航背景*/
--navbar-collapse-text: #404040; /* 导航文字*/
--next-btn-border-deactivated: #dadada; /* 下一页文字 */
--post-preview-color: #bfbfbf; /* 首页文章标题 */
--pages-background-color: #181818; /* 下一页填充 */
user-select: text; /* 防复制文字 */
-webkit-user-select: text; /* 防复制文字 */
}
}
@media (prefers-color-scheme: light) {
:root {
--main-color: #ce5654; /* 主色调 */
--bg-color: #fff; /* 明亮主题色 */
--main-context-color: #404040; /* 文章文字 */
--text-navbar: #404040; /* 导航菜单,文章标题 */
--catalog-body-color: #bfbfbf; /* 文章侧目录 */
--hr-border-color: #ebebeb; /* 分割线 */
--search-page: #fff; /* 搜索页背景 */
--search-text: #181818; /* 搜索字 */
--search-bar: #fff; /* 搜索框背景 */
--navbar-collapse-background: #fff; /* 导航背景*/
--navbar-collapse-text: #404040; /* 导航文字*/
--next-btn-border-deactivated: #000000; /* 下一页文字 */
--post-preview-color: #404040; /* 首页文章标题 */
--pages-background-color: #fff; /* 下一页填充 */
user-select: text; /* 防复制文字 */
-webkit-user-select: text; /* 防复制文字 */
}
}
body {
background-color: var(--bg-color);
user-select: text;
margin: 0;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.main-container {
background-color: var(--bg-color);
padding-top: 20px;
}
