WHY

深色模式虽然不常用,但是发现深色模式下展示的图片过于亮了,而通常使用深色是因为灯光暗保护眼睛(或者装 X),想起之前看到的一篇博文 几行CSS让整站支持深色模式的探索与拓展,顺手尝试一下吧~

WHAT

实际动手代码相当简单,但发现,深色模式的背景色黑色,不需要反向色调,加个透明度就足够了,参考如下:

  • 未加透明度

  • 加透明度 0.7

HOW

只加透明度,CSS 没啥难度 opacity: 0.7

  1. hugo 的样式控制由主题各自控制,找到对应的 default.scss 文件,增加 dark-theme 参数

  1. 找到对应博文的样式文件(外层嵌套 figure 用于放大图片)

Done ! ~ 可以试下点击本博客右上角的模式切换哦