Darkmode 支持

2019, Oct 10 需要1分钟读完

TL:DR

主站优化 + Darkmode

暗黑模式，其实就是几行代码的事情主要的坑都在后面

@media (prefers-color-scheme: dark) {
.vb{visibility:hidden}#‌,body{background:#222}
.‌::after{content:"It's late, goodnight."}
}

这次优化还顺便给一页式主页添加了以下几个特性:

PWA - manifest
preconnect
dns-prefetch

Hugo + Darkmode

无需修改主题，通过额外的 CSS 样式支持暗黑模式

修改博客配置文件 config.toml

增加行

extracssfiles = [ "/css/dark.css?v=1003" ]       # `static` directory

对应的 dark.css 参考内容

@media (prefers-color-scheme: dark) {
    body, code, td, figure, pre, blockquote{
        background:#181818 !important
    }
    pre, blockquote {
        border-left: #666 0.3rem solid !important
    }
}

根据自己的需要修改 CSS 样式即可

PS: 增加暗黑模式很容易，坑的事情则是 “这个颜色从哪来的” 等问题吧…