设置本站暗黑主题根据系统主题自动切换

Hux+CSS+黑暗模式

Posted by Carl on March 24, 2023
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;
}