Hexo+Butterfly的dark mode开发

最近有同学找我反馈，QSL页面在黑夜模式下的显示完全看不清。

这个显示效果显然是看不清的。于是我决定改进一下这个页面，开发一个清晰且正确的dark mode。

Vibe

由于这个QSL页面的代码本来就是让AI生成的，那么修改dark mode自然也是交给AI来完成。

Talk is cheap, here is my prompt.

（上传文件index.md）这是一个hexo博客butterfly主题的网页，其中的QSL信息表格在darkmode下会看不清，如何改进style样式

为了让 QSL 信息表格在暗黑模式下也能清晰显示，你可以在现有的 <style> 标签末尾添加暗黑模式适配样式。以下是改进后的样式代码，可以添加到现有样式的末尾：
1
...
如果你使用的是 Butterfly 主题自带的暗黑模式（通常是通过 theme_config.darkmode 配置的），你可能还需要添加 .dark-mode 类名选择器：
1
2
3
4
5
6
/* 如果是 Butterfly 主题自带的 dark-mode 类 */
.dark-mode .my-station-card {
  background: linear-gradient(135deg, #5a3c5a 0%, #3c3c5a 100%);
  color: #f0f0f0;
}
/* 其他样式同上，只需在前面加上 .dark-mode 即可 */
—— 如果你使用的是 Hexo Butterfly 主题 4.0+，它通常使用以下方式切换暗黑模式： - 通过 data-theme="dark" 属性 - 或通过 .dark 类

你可以这样写：
1
2
3
4
5
6
7
/* 适配 Butterfly 4.0+ 暗黑模式 */
>[data-theme="dark"] .my-station-card,
>.dark .my-station-card {
 background: linear-gradient(135deg, >#5a3c5a 0%, #3c3c5a 100%);
 color: #f0f0f0;
>}
>/* 其他样式同理，只需在前面加上 [data-theme="dark"] 和 .dark 即可 */

我的需求是适配butterfly自带的dark mode；访问网站打开F12检阅，按Ctrl+F搜索关键词dark，找到了词条data-theme="dark"，所以我们应该采取最后一种。

我只需要适配data-theme=“dark”，如何修改

你需要为 data-theme=“dark” 属性选择器添加适配样式。以下是完整的暗黑模式适配样式，只需添加到现有 <style> 标签末尾即可：
1
>...
把这些样式直接添加到你现有的 <style> 标签末尾即可。这样当主题切换到暗黑模式时（即 data-theme="dark"），所有相关的元素都会使用暗色调的配色方案，确保内容的可读性和视觉舒适度。

复制粘贴，生成预览，果然修复了黑暗模式的页面效果。

原理解析

查看butterfly主题的黑夜模式定义，位于/themes/butterfly/source/css/_mode/darkmode.styl，这是一个stylus文件，用于对css进行预处理。

其中第一行定义了

1	if hexo-config('darkmode.enable') \|\| hexo-config('display_mode') == 'dark'

定义了在什么情况下启用这个黑夜模式。

第二行定义了

1	[data-theme='dark']

用于标注黑夜模式下的css选择器。这样在切换dark mode时，只需要改变data-theme的属性即可切换所有带有该标签的元素属性。

后面的行是一些全局的css变量定义，比如全局背景颜色等等。使用darken() lighten() alpha()等函数进行调色而非写死颜色。

因此，对于自己写的页面，如果想要自定义黑夜模式下的行为，只要在<style>部分额外添加[data-theme="dark"]时的另一套css样式变量就可以了。