夜间模式有时亦叫做黑暗模式或者深色模式,是一种高对比度,或者反色模式的显示模式。由于现代乡村都市生活,很多人要长时间使用电脑、手机、电视、平板电脑,长时间阅览白底黑字的文件或者界面,会使眼睛感到不适,长此以往会造成视力受损。另外,夜间模式还可以减少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
刚刚调了一下css样式,看你背景颜色不错,直接把背景颜色换成和你一样的,导航栏直接在背景色的基础上调整了一下
@浮游 背景色是从 WordPress 2020 主题偷来的。
@老头 我觉得颜色还行,挺养眼的
@浮游 我觉得也不错,所以才偷过来了。
可以的,最后你会发现,还是原来的颜色更舒服。
@奶爸建网站笔记 嗯,原本颜色更好,现在的更简单,也不错吧。
@奶爸建网站笔记 折腾了下,颜色基本上回来了……囧……
@奶爸建网站笔记 同感,哈哈,这个颜色太亮。
@郑永 更暖。
搞黑白的干什么呀?不好看。
@张波博客 是难看点,不过颜色少点容易维护。
是自动黑夜模式?
@灰常记忆 是,不过前提是设备/浏览器支持。
@老头 放在CSS里就可以了?
@灰常记忆 是啊。
还是原来的好,黑色不习惯呀
@逆时针 只是晚上会适配开启。
我也搞了一下,但还不完善,关键手头没mac,尴尬了,只在ios13看了下,哈哈。
@山小炮 可以判断是否管理员强制暗黑模式调试,我就是这么干的。
@老头 我发现安卓系统也可以哦。
@山小炮 有暗黑模式的设备都可以。
已经加进去了。
@Sam.Z 貌似字体变色了,背景色没有变,缓存?
@老头 没有验证也,我都用的FF自带插件设置Dark模式,晚点我再试试,不行就cancel了。
@Sam.Z 看了一下你 css,暗黑模式代码放最后,可以加上 !important
@老头 要得,电脑刚才关了,明天上班弄,好冷,早点进被窝
@media (prefers-color-scheme: dark) 安卓手机不兼容吧,那安卓需要怎么判断暗黑模式嘛
@xy 不支持的可以上 js 吧,不过我只折腾了 css
@老头 if(window.matchMedia(“(prefers-color-scheme:dark)”).matches) js用了这个,也不兼容。