本文已收录至 Butterfly 主题美化教程

Butterfly 主题中提供了夜间模式，夜间模式下，字体颜色、图片亮度等都会有所变化。

Butterfly 主题中没有提供网站 Logo 的夜间模式版本，本文章将给出解决方案。可以直接看实操部分节约你的时间。

原理

图标元素 HTML 代码如下：

image.png

我们可以通过选择出夜间模式的这个 img 元素，更改它的图片源即可达到目的。

实操

在主题配置文件中，你可能设置了网站的 logo：

1
2
nav:
  logo: https://cdn.gallery.uuanqin.top/img/logo-bc.png

如果想要在夜间模式下换个 Logo，可以新建 CSS 写入以下内容：

1
2
3
[data-theme='dark'] img.site-icon {
    content: url(https://cdn.gallery.uuanqin.top/img/logo-dw.png);
}

url 里填的是你想在夜间模式显示的 Logo。

将此 CSS 文件 引入主题中。Butterfly 主题的方法为在主题配置文件的 inject 部分引入 CSS，如：

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="your css">
  bottom:
    - <script src="your js"></script>

效果

image.png

image.png

大功告成！

举一反三

只要你的 CSS 筛选器定位到图片，就可以进行在夜间模式替换图片。

效果：

image.png

image.png

高级多了~😍

此外，理论上讲，利用这一点不管是不是图片，只要被 CSS 选择器选中就可以设置其夜间模式效果。基于此我把与夜间模式相关的调整都放在了 darktheme_modify.css 中，再进行 inject。比如：

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
/*顶部的网站图标*/
[data-theme='dark'] img.site-icon {
    content: url(https://cdn.gallery.uuanqin.top/img/logo-dw.png);
}

/*脚注的图标*/
[data-theme='dark'] .footer-logo img {
    content: url(https://cdn.gallery.uuanqin.top/img/A%E5%85%A8%E5%BD%A9%E6%97%A0%E5%AD%97.png);
}

/*十年之约图标*/
[data-theme='dark'] img.img-foreverblog {
    content: url(https://cdn.gallery.uuanqin.top/img/logo_en_default.webp);
}

/*Not By AI 图标*/
[data-theme='dark'] img.img-not-ai {
    content: url(https://cdn.gallery.uuanqin.top/img/Written-By-Human-Not-By-AI-Badge-black.svg);
}

[data-theme='dark'] svg#graph-canvas {
    background-color: #121212;
}

/* hexo-megnet 插件的按钮夜间模式背景颜色 */
[data-theme='dark'] .magnet_item {
    background: #414141;
}
/* hexo-megnet 插件的按钮夜间模式文字颜色 */
[data-theme='dark'] .magnet_link {
    color: white;
}

/* 页脚波浪的颜色 */
[data-theme='dark'] .footer-wave-path {
    fill: #0f3858;
}
[data-theme='dark'] .footer-content-div {
    background-color: #0f3858;
}

/* 页脚海底的颜色 */
[data-theme='dark'] .footer-copyright {
    background-color: #104e5e;
}
[data-theme='dark'] .footer-social-amoeba-path {
    fill: #104e5e;
}

本文参考