站点图标 垃圾站

WordPress 博客网站 JS+CSS 自动/手动开启暗黑模式

夜间模式有时亦叫做黑暗模式或者深色模式,是一种高对比度,或者反色模式的显示模式。由于现代乡村都市生活,很多人要长时间使用电脑、手机、电视、平板电脑,长时间阅览白底黑字的文件或者界面,会使眼睛感到不适,长此以往会造成视力受损。另外,夜间模式还可以减少OLED屏幕手机耗电量,延长手机使用时间,所有有些人甚至在白天都打开设备夜间模式。

WordPress 博客网站纯 CSS 自动跟随设备开启暗黑模式

来源:Dark mode in a website with CSS,看着很简单,不过真要折腾还是挺麻烦。

为此,css 文件干掉了很多设置不同颜色的代码。优化了一下,原本颜色基本上回来了,暗黑模式也还行),暗黑模式看起来才有点像样了。原文代码:

@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}

支持 Firefox、Safari 和 Chrome 等浏览器。需要根据实际添加需要变色的 class/id。亲测 iOS 13 暗黑模式下 Chrome 和 Safari 浏览器自动生效。

这个方法缺点是:需要设备支持暗黑模式,否则无法生效。

WordPress 博客网站 JS+CSS 自动/手动开启暗黑模式

参照「宝硕博客 -浅谈网页「深色模式」的实现」,把博客暗黑模式优化了一下,增加了 js 代码判断和优化 css,基本上实现 WordPress 博客网站自动(根据时间或者跟随设备)/手动开启暗黑模式。

白天亮色:

暗黑模式:

参考资料文档备份下载:绿皮火车-wp-暗黑模式-20210806