自己给博客写的主题 Fuji 正在进行大改版，顺手也把夜间模式 (深色模式、黑暗模式？都差不多) 进行了改版以适配 prefers-color-scheme。

v1 的旧实现方法

起初写主题的时候深色模式用了最基础的办法，也是兼容性最好的办法。给 body 加上 data-theme 属性，根据属性值是 light 还是 dark 判断主题。CSS 中独立写出两种配色，分别包括在 body[data-theme='light'] 和 body[data-theme='light'] 块内。

直接维护两套样式的方法清晰直观，但会造成冗余代码，而且构建一时爽、维护火葬场。

近来在给我的 Hugo 主题 Fuji 写一次大更新，准备添加一些新功能顺便整理一下混乱的 SCSS 结构。由于近期入手一台 iPad，晚上几乎一直是在夜间模式下逛网页，因此计划给主题添加一个夜间模式。原本挺简单的一个小功能没想到却踩了不少坑，在此记录一下。

从抛弃 Jekyll 转向 Hugo 搞毫无用处的静态站到现在，全程就是在不停的 Ctrl+C 和 Ctrl+V。别人的主题用久了也腻了，于是翻来找去从 printempw 那儿继续 Ctrl+C 了一个主题，不过这次是自己从零开始。

在写分页导航的时候遇到了不少问题，也查了不少资料，简单记录一下。

在使用 utterances 作为博客评论系统的时候发现了一些问题。当评论区处于加载中或是加载失败状态的时候，评论区 div 可能会产生一块空白。虽然由于自家主题的原因看不出来，但如果使用到其他主题 (有边框或者阴影之类) 就会很明显。

在给自己博客写主题的时候，计划要加个返回页面顶部的按钮。既然按钮也计划上了，干脆又决定在上面顺便集成一个进度条来显示当前的阅读进度。作为懒人模范的我自然又开始想着 Ctrl+C 了，找了一圈后发现个很不错的轮子 ProgressBar.js。

ProgressBar.js 能借助 SVG 生成各种形状的响应式进度条。它本身提供了线形，圆形和半圆形等形状，也可以用 Adobe Illustrator 之类的矢量图形编辑器创建自己想要的自定义图形。

近期闲着无事学习 Hugo，光看不过瘾还得上手弄点简单的东西写写。受铃最近直播零轨的启发，就做了个轨迹系列到现在为止的作品汇总。但是一旦真的开始开工了，自然就会想着偷懒，于是尝试了一波 Hugo 的 Data 模板。