发布于  更新于 

Stellar主题切换深色/浅色模式

资源文件

CSS

tale/source/customize/css/ZYDark.css
tale/source/customize/css/ZYDark.css
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
#ZYDark:root {
  --site-bg: #1c1e21;
  --card: #373d43;
  --block: #26292c;
  --block-border: #383d42;
  --block-hover: #2f3337;
  --text-p0: #fff;
  --text-p1: #ccc;
  --text-p2: #b3b3b3;
  --text-p3: #858585;
  --text-p4: #707070;
  --text-meta: #4d4d4d;
  --text-code: #ff6333;
}
@media screen and (max-width: 667px) {
  #ZYDark:root {
    --site-bg: #000;
  }
}
#ZYDark:root {
  --blur-bg: rgba(0,0,0,0.5);
}
#ZYDark .float-panel {
  --blur-bg: rgba(0,0,0,0.4);
}
#ZYDark .tag-plugin.tag {
  --theme: #ff6333;
  --theme-bg1: #3d1e14;
  --theme-bg2: #2f2522;
  --theme-border: #5c2d1f;
  --text-p0: #ffc4b3;
  --text-p1: #dfae9f;
  --text-p2: #f1997e;
}
#ZYDark .tag-plugin[color='red'] {
  --theme: #f44336;
  --theme-bg1: #3d1714;
  --theme-bg2: #2f2322;
  --theme-border: #5c231f;
  --text-p0: #ffb8b3;
  --text-p1: #dfa49f;
  --text-p2: #f1867e;
}
#ZYDark .tag-plugin[color='orange'] {
  --theme: #fa6400;
  --theme-bg1: #3d2514;
  --theme-bg2: #2f2722;
  --theme-border: #5c371f;
  --text-p0: #ffd1b3;
  --text-p1: #dfb99f;
  --text-p2: #f1ac7e;
}
#ZYDark .tag-plugin[color='yellow'] {
  --theme: #ffbd2b;
  --theme-bg1: #3d3014;
  --theme-bg2: #2f2b22;
  --theme-border: #5c491f;
  --text-p0: #ffe7b3;
  --text-p1: #dfcb9f;
  --text-p2: #f1cd7e;
}
#ZYDark .tag-plugin[color='green'] {
  --theme: #3dc550;
  --theme-bg1: #143d1a;
  --theme-bg2: #222f24;
  --theme-border: #1f5c27;
  --text-p0: #b3ffbd;
  --text-p1: #9fdfa8;
  --text-p2: #7ef18e;
}
#ZYDark .tag-plugin[color='cyan'] {
  --theme: #1bcdfc;
  --theme-bg1: #14353d;
  --theme-bg2: #222d2f;
  --theme-border: #1f4f5c;
  --text-p0: #b3efff;
  --text-p1: #9fd2df;
  --text-p2: #7ed9f1;
}
#ZYDark .tag-plugin[color='blue'] {
  --theme: #2196f3;
  --theme-bg1: #142b3d;
  --theme-bg2: #222a2f;
  --theme-border: #1f415c;
  --text-p0: #b3ddff;
  --text-p1: #9fc3df;
  --text-p2: #7ebef1;
}
#ZYDark .tag-plugin[color='purple'] {
  --theme: #9c27b0;
  --theme-bg1: #37143d;
  --theme-bg2: #2d222f;
  --theme-border: #531f5c;
  --text-p0: #f4b3ff;
  --text-p1: #d69fdf;
  --text-p2: #e07ef1;
}
#ZYDark .tag-plugin[color='light'] {
  --theme-border: #fff;
  --theme-bg1: #e0e0e0;
  --theme-bg2: #fff;
  --text-p0: #000;
  --text-p1: #111;
  --text-p2: #1f1f1f;
  --text-p3: #555;
  --text-code: #fff;
}
#ZYDark .tag-plugin[color='dark'] {
  --theme-border: #000;
  --theme-bg1: #1f1f1f;
  --theme-bg2: #111;
  --text-p0: #fff;
  --text-p1: #fff;
  --text-p2: #e0e0e0;
  --text-p3: #ddd;
  --text-code: #fff;
}
#ZYDark .tag-plugin[color='warning'],
#ZYDark .tag-plugin[color='light'] {
  --text-p0: #000;
  --text-p1: #111;
  --text-p2: #1f1f1f;
  --text-p3: #555;
  --text-code: #fff;
}
#ZYDark .social-wrap a.social:hover {
  box-shadow: none;
}

/* waline评论样式 */
#ZYDark .wl-count{
  padding: .375em;
  font-weight: bold;
  font-size: 1.25em;
  color: #fff;
}
#ZYDark .cmt-body.waline{
  --waline-white: #000;
  --waline-light-grey: #666;
  --waline-dark-grey: #999;
  /* 布局颜色 */

  --waline-color: #fff;
  --waline-bgcolor: var(--block);
  --waline-bgcolor-light: #272727;
  --waline-border-color: #333;
  --waline-disable-bgcolor: #444;
  --waline-disable-color: #272727;
  /* 特殊颜色 */
  --waline-bq-color: #272727;
  /* 其他颜色 */
  --waline-info-bgcolor: #272727;
  --waline-info-color: #666;
}

JS

js代码中的5、6、7对应侧边栏底部按钮的顺序，依次为黑夜、白天、自动（隐藏）。

如果评论系统未使用giscus则把涉及评论的代码删除。

tale/source/customize/js/ZYDark.js
tale/source/customize/js/ZYDark.js
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
/**
 * 监听系统主题
 * @type {MediaQueryList}
 */
var OSTheme = window.matchMedia('(prefers-color-scheme: dark)');
OSTheme.addListener(e => {
    if (window.localStorage.getItem('ZYI_Theme_Mode') === 'Moss') {
        ThemeChange('Moss');
    }
})
/**
 * 修改博客主题
 * @param theme 亮为light,暗为dark,自动为auto
 * @constructor
 */
const ThemeChange = (theme) => {
    if(document.querySelector("#start > aside > footer > div > a:nth-child(6)") != 'undefined' && document.querySelector("#start > aside > footer > div > a:nth-child(6)") != null){
        if (theme === 'light' || (theme === 'Moss' && !OSTheme.matches)) {
            document.querySelector("html").id = "ZYLight";
            document.querySelector("#start > aside > footer > div > a:nth-child(6)").style.filter = 'grayscale(0%)';
            document.querySelector("#start > aside > footer > div > a:nth-child(5)").style.filter = 'grayscale(100%)';
        } else {
            document.querySelector("html").id = "ZYDark";
            document.querySelector("#start > aside > footer > div > a:nth-child(5)").style.filter = 'grayscale(0%)';
            document.querySelector("#start > aside > footer > div > a:nth-child(6)").style.filter = 'grayscale(100%)';
        }
        //if (theme === 'Moss') { document.querySelector("#start > aside > footer > div > a:nth-child(7)").style.filter = 'grayscale(0%)'; }
        //else { document.querySelector("#start > aside > footer > div > a:nth-child(7)").style.filter = 'grayscale(100%)'; }
        window.localStorage.setItem('ZYI_Theme_Mode', theme);
        commentChange(theme);
    }
}
/**
 * 修改评论主题
 * @param theme
 */
const commentChange = (theme) => {
    try {
        let commentSrc = document.querySelector("#comments > section.body.cmt-body.giscus > iframe").src;
        if (theme === "Moss") {
            theme = OSTheme.matches? 'dark' : 'light';
        }
        commentSrc = commentSrc.replace(theme === 'dark' ? 'theme=light' : 'theme=dark', theme === 'dark' ? 'theme=dark' : 'theme=light');
        commentSrc = commentSrc.replace('theme=preferred_color_scheme', theme === 'dark' ? 'theme=dark' : 'theme=light');
        document.querySelector("#comments > section.body.cmt-body.giscus > iframe").src = commentSrc;
    } catch (e) {
    }
}
/**
 * 初始化博客主题
 */
switch (window.localStorage.getItem('ZYI_Theme_Mode')) {
    case 'light':
        ThemeChange('light');
        break;
    case 'dark':
        ThemeChange('dark');
        break;
    default:
        ThemeChange('Moss');
}
/**
 * 初始化评论主题
 */
if (!(new ZYUtil).isIndexs()) {
    try {
        let dom = document.querySelector("#comments > section.body.cmt-body.giscus");
        let MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver
        let mutationObserver = new MutationObserver(function (mutations) {
            commentChange(window.localStorage.getItem('ZYI_Theme_Mode'));
        })
        mutationObserver.observe(dom, {
            childList: true, // 子节点的变动（新增、删除或者更改）
        })
    } catch (e) { }
}
if(document.querySelector("#start > aside > footer > div > a:nth-child(6)") != 'undefined' && document.querySelector("#start > aside > footer > div > a:nth-child(6)") != null){
    /**
     * 切换主题模式
     */
    document.querySelector("#start > aside > footer > div > a:nth-child(5)").onclick = () => {
        ThemeChange('dark');
    }
    document.querySelector("#start > aside > footer > div > a:nth-child(6)").onclick = () => {
        ThemeChange('light');
    }
    //document.querySelector("#start > aside > footer > div > a:nth-child(7)").onclick = () => {
    //    ThemeChange('Moss');
    //}
}

提前量

tale/_config.yml
1
2
3
4
5
6
7
8
9
# 自定义引入css,js
inject:
  head:
    - |
      <script>
        if (window.localStorage.getItem('ZYI_Theme_Mode')==='dark' || (window.localStorage.getItem('ZYI_Theme_Mode')==='Moss' && window.matchMedia('(prefers-color-scheme: dark)').matches)){
            document.querySelector("html").id = "ZYDark";
        }
      </script> #黑夜样式提前量

引入资源文件

tale/_config.yml
1
2
3
4
5
6
# 自定义引入css,js
inject:
  head:
    - <link rel="stylesheet" href="/customize/css/ZYDark.css"> # 黑夜样式
  script:
    - <script type="text/javascript" src="/customize/js/ZYDark.js"></script> # 黑夜控制

默认黑夜模式关闭

tale/_config.yml
1
2
style:
  darkmode: false # auto / always / false

添加侧边栏底部按钮

tale/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
footer:
  social:
    ...
    Moon:
      icon: '<img id="ThemeM" src="/customize/svg/moon.svg"/>'
      url: javaScript:void('永夜');
    Sun:
      icon: '<img id="ThemeL" src="/customize/svg/sun.svg"/>'
      url: javaScript:void('永昼');
    #AI:
    # icon: '<img id="ThemeAI" src="/customize/svg/auto.svg"/>'
    # url: javaScript:void('跟随系统');

SVG文件获取

阿里巴巴矢量图标库（iconfont）里面有很多设计精美的图标可以直接生成svg图标下载到本地。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

本站由 SFZhang 使用 Stellar 主题创建
本页访问 次 | 总访问 次

豫ICP备2023025818号-1 ｜ 豫公网安备41012202000371