本文已收录至 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。

本文参考