Darkmode 支持
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: 增加暗黑模式很容易,坑的事情则是 “这个颜色从哪来的” 等问题吧…