总文章在这里

使用Hexo和Stellar搭建个人博客网站https://bxzdyg.cn/p/%E4%BD%BF%E7%94%A8Hexo%E5%92%8CStellar%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/

本篇文章是这篇大文章的抽离，因为本篇文章代码段落较长刚好拿来凑文章节数，且具有随时更新的特性，不好固定在一个文章里，也不能写在wiki里，否则无法被推荐。

前人的肩膀

Stellar可控夜间模式 - 那个码农 (thatcoder.cn)

stellar本来就提供了dark模式，不过做不到手动切换，找到一个大佬提取了样式，head中插入js代码，然后由css检验并展示当前是什么模式，中间用到了localStorage存储主题模式

不过还是有些样式没有照顾到位，比如引入一些stellar大佬支持的评论，对应的评论样式比较突兀，原方法的博主，通过css选择器，没有判断下面标签有没有存在，导致在wiki页面会弹一个错误（强迫症），虽然影响不大，还有跟随模式到底是什么呢？

新建两个文件，没有就大胆创建，因为这是我们自己加的。

1
2
blog\source\css\darkmode.css
blog\source\js\darkmode.js

CSS

先提取对应的css样式，设置不同的类名，以便于之后自动切换样式

stellar主题的dark模式

点击查看代码
blog\source\css\darkmode.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
#Dark: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) {
    #Dark:root {
        --site-bg: #000;
    }
}
#Dark:root {
    --blur-bg: rgba(0,0,0,0.5);
}
#Dark .float-panel {
    --blur-bg: rgba(0,0,0,0.4);
}
#Dark .tag-plugin.tag {
    --theme: #ff6333;
    --theme-bg1: #3d1e14;
    --theme-bg2: #2f2522;
    --theme-border: #5c2d1f;
    --text-p0: #ffc4b3;
    --text-p1: #dfae9f;
    --text-p2: #f1997e;
}
#Dark .tag-plugin[color='red'] {
    --theme: #f44336;
    --theme-bg1: #3d1714;
    --theme-bg2: #2f2322;
    --theme-border: #5c231f;
    --text-p0: #ffb8b3;
    --text-p1: #dfa49f;
    --text-p2: #f1867e;
}
#Dark .tag-plugin[color='orange'] {
    --theme: #fa6400;
    --theme-bg1: #3d2514;
    --theme-bg2: #2f2722;
    --theme-border: #5c371f;
    --text-p0: #ffd1b3;
    --text-p1: #dfb99f;
    --text-p2: #f1ac7e;
}
#Dark .tag-plugin[color='yellow'] {
    --theme: #ffbd2b;
    --theme-bg1: #3d3014;
    --theme-bg2: #2f2b22;
    --theme-border: #5c491f;
    --text-p0: #ffe7b3;
    --text-p1: #dfcb9f;
    --text-p2: #f1cd7e;
}
#Dark .tag-plugin[color='green'] {
    --theme: #3dc550;
    --theme-bg1: #143d1a;
    --theme-bg2: #222f24;
    --theme-border: #1f5c27;
    --text-p0: #b3ffbd;
    --text-p1: #9fdfa8;
    --text-p2: #7ef18e;
}
#Dark .tag-plugin[color='cyan'] {
    --theme: #1bcdfc;
    --theme-bg1: #14353d;
    --theme-bg2: #222d2f;
    --theme-border: #1f4f5c;
    --text-p0: #b3efff;
    --text-p1: #9fd2df;
    --text-p2: #7ed9f1;
}
#Dark .tag-plugin[color='blue'] {
    --theme: #2196f3;
    --theme-bg1: #142b3d;
    --theme-bg2: #222a2f;
    --theme-border: #1f415c;
    --text-p0: #b3ddff;
    --text-p1: #9fc3df;
    --text-p2: #7ebef1;
}
#Dark .tag-plugin[color='purple'] {
    --theme: #9c27b0;
    --theme-bg1: #37143d;
    --theme-bg2: #2d222f;
    --theme-border: #531f5c;
    --text-p0: #f4b3ff;
    --text-p1: #d69fdf;
    --text-p2: #e07ef1;
}
#Dark .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;
}
#Dark .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;
}
#Dark .tag-plugin[color='warning'],
#Dark .tag-plugin[color='light'] {
    --text-p0: #000;
    --text-p1: #111;
    --text-p2: #1f1f1f;
    --text-p3: #555;
    --text-code: #fff;
}
#Dark .social-wrap a.social:hover {
    box-shadow: none;
}

waline评论样式(选)

点击查看代码
blog\source\css\darkmode.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
/* waline评论样式 */
#Dark .wl-count{
    padding: .375em;
    font-weight: bold;
    font-size: 1.25em;
    color: #fff;
}
#Dark .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;
}
#Dark .wl-user-name {
    color: #999;
}

artalk评论样式(选)

点击查看代码
blog\source\css\darkmode.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
/* artalk评论样式 */
.artalk {
  --at-color-main: #1cd0fd;
}
.artalk a, .atk-layer-wrap a {
  color: #1cd0fd;
  text-decoration: none;
}
.artalk>.atk-list>.atk-list-footer .atk-copyright a {
color: #1cd0fd;
text-decoration: none;
}

#Dark .artalk,
.atk-layer-wrap {
  --at-color-font: #fff;
  --at-color-deep: #e7e7e7;
  --at-color-sub: #e7e7e7;
  --at-color-grey: #fff;
  --at-color-meta: #fff;
  --at-color-border: #2d3235;
  --at-color-light: #687a86;
  --at-color-bg: #2d3235;
  --at-color-bg-transl: rgba(30, 34, 36, .95);
  --at-color-bg-grey: #46494e;
  --at-color-bg-grey-transl: rgba(8, 8, 8, .95);
  --at-color-bg-light: rgba(29, 161, 242, .1);
  --at-color-main: #1cd0fd;
  --at-color-red: #ff5652;
  --at-color-pink: #fa5a57;
  --at-color-yellow: #ff7c37;
  --at-color-green: #4caf50;
  --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1));
}

#Dark .atk-main-editor>.atk-header input::placeholder {
  color: white;
}

#Dark textarea.atk-textarea::placeholder {
  color: #666;
}

#Dark atk-ua-wrap {
  color: #666666;
  background: #272727;
}
#Dark .atk-main-editor>.atk-bottom .atk-send-btn {
background:#1cd0fd;
}
#Dark .atk-ua-wrap>span.atk-region-badge{
    background:#333
}

.atk-comment>.atk-main>.atk-header .atk-item.atk-nick, .atk-comment>.atk-main>.atk-header .atk-item.atk-nick a {
    font-size: 14px;
    color: #1cd0fd;
    text-decoration: none;
}
.atk-comment>.atk-main>.atk-header .atk-item.atk-reply-at>.atk-nick {
    color: #1cd0fd;;
    cursor: pointer;
    margin-left: 6px;
}

#Dark .atk-comment>.atk-main>.atk-header .badge, 
#Dark .atk-comment>.atk-main>.atk-header .atk-ua,
#Dark .atk-comment>.atk-main>.atk-header .atk-pinned-badge,
#Dark .atk-comment>.atk-main>.atk-header .atk-region-badge {
    display: inline-block;
    color: #666;
    background: #272727;
    padding: 0 6px;
    line-height: 17px;
    border-radius: 3px;
}

aplayer音乐播放器(选)

/p/stellar-aplayer-metingjs/https://bxzdyg.cn/p/stellar-aplayer-metingjs/

相关的文章在这里。

点击查看代码
blog\source\css\darkmode.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
/* aplayer音乐播放器样式 */
#Dark .aplayer {
    background: #26292c;
    font-family: Arial,Helvetica,sans-serif;
    margin: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    position: relative;
}

#Dark .aplayer .aplayer-list ol li {
    position: relative;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    font-size: 12px;
    border-top: 1px solid #383d42;
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    margin: 0;
}
/* 当前选择歌曲 */
#Dark .aplayer .aplayer-list ol li.aplayer-list-light {
    background: #f4f4f4;
    color: #373737;
    font-size: small;
    font-weight: bold;
}
/* 经过字体颜色和大小变化 */
#Dark .aplayer .aplayer-list ol li:hover {
    background: #efefef;
    color: #ff5722;
    font-size: small;
    font-weight: bold;
}

版权-不是ai制作标识(选)

这里只是利用css切换了一下图片，这个图片有黑白两者款式，黑夜用黑的，白天用白的

blog\source\css\darkmode.css
1
2
3
4
/* 不是ai制作标识 */
#Dark #notbyai {
    content: url("/assets/website/Written-By-Human-black.png");
  }

JS

blog\source\js\darkmode.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
91
92
93
94
95
96
97
98
99
100
101
102
/**
 * 监听系统主题
 * @type {MediaQueryList}
 */
var OSTheme = window.matchMedia('(prefers-color-scheme: dark)');
OSTheme.addListener(e => {
    if (window.localStorage.getItem('Theme_Mode') === 'auto') {
        ThemeChange('auto');
    }
})
/**
 * 自动模式 6:00-18:00-Light 18:00-6:00-Dark,开启后每三十分钟检查一次
 */
const AutoMode = (htmlElement) => {
    var date = new Date();
    var hours = date.getHours();
    if (hours < 18 && hours >= 6) {
        document.querySelector("html").id = "Light";
    } else {
        document.querySelector("html").id = "Dark";
    }
    // if (htmlElement.id === "Light") {    // 闪瞎你的眼模式（速度快一点的话）
    //     htmlElement.id = "Dark";
    // } else { htmlElement.id = "Light"; }
}

let autoTimer;

/**
 * 修改博客主题
 * @param theme 亮为light,暗为dark,自动为auto
 * @constructor
 */
const ThemeChange = (theme) => {
    // 清除计时器
    clearInterval(autoTimer);
    // 抽取元素
    const htmlElement = document.querySelector("html");
    let themeBtnIcon;
    try {
        themeBtnIcon = document.querySelector("#start > aside > footer > div > a:last-child > i")
    }
    catch {
        // 元素不存在
    }

    if (theme === 'light' || (theme === 'auto' && !OSTheme.matches)) {
        htmlElement.id = "Light";
        if (themeBtnIcon) {
            themeBtnIcon.className = 'fa-solid fa-sun fa-spin fa-spin-reverse';
        }
    } else {
        htmlElement.id = "Dark";
        if (themeBtnIcon) {
            themeBtnIcon.className = 'fa-solid fa-moon fa-fade';
        }
    }
    if (theme === 'auto') {
        if (themeBtnIcon) {
            themeBtnIcon.className = 'fa-solid fa-circle-half-stroke fa-flip';
        }
        AutoMode(htmlElement);
        autoTimer = setInterval(function () {
            AutoMode(htmlElement);
        }, 1000 * 60 * 30); // 半小时一次
    }
    window.localStorage.setItem('Theme_Mode', theme);
}

/**
 * 初始化博客主题
 */
switch (window.localStorage.getItem('Theme_Mode')) {
    case 'light':
        ThemeChange('light');
        break;
    case 'dark':
        ThemeChange('dark');
        break;
    default:
        ThemeChange('auto');
}
/**
 * 切换主题模式
 */
// 绑定按钮点击事件
try {
    document.querySelector("#start > aside > footer > div > a:last-child").onclick = () => {
        if (window.localStorage.getItem('Theme_Mode') === 'auto') {
            hud.toast('🌞白天模式');
            ThemeChange('light');
        } else if (window.localStorage.getItem('Theme_Mode') === 'light') {
            hud.toast('🌙 夜间模式');
            ThemeChange('dark');
        } else {
            hud.toast('🌞/🌙 自动模式');
            ThemeChange('auto');
        }
    }
} catch {
    // 元素不存在
}

按钮

blog\_config.stellar.yml
1
2
3
4
5
6
######## Footer ########
footer:
  social:
    mode:
      icon: '<i class="fa-solid fa-circle-half-stroke fa-flip"></i>'
      url: javaScript:void(0);

注意要结合上面js文件的css选择器，我的是最后一个a标签

引入

blog\_config.yml
1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/darkmode.css"> # 黑夜样式
  script:
    - <script type="text/javascript" src="/js/darkmode.js"></script> # 黑夜控制

最后的最后，好好学前端，顺便给这个模式多加上一个动画，像是element-plus官网的那个，很炫酷。

许可协议

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

分享文章

快来参与讨论吧~

博客近期分类标签归档
笔记Vue学习笔记Django学习笔记MySQL学习笔记
社交友链留言板
更多关于本站GitHubGitee

本破站由 @BXZDYG 使用 Stellar 主题创建。
本博客部分素材来源于网络，如有侵权请联系1476341845@qq.com删除
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本"页面"访问 次 | 👀总访问 次 | 总访客 人
全部都是博主用心学编写的啊！不是ai啊 只要保留原作者姓名并在基于原作创作的新作品适用同类型的许可协议，即可基于非商业目的对原作重新编排、改编或者再创作。