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

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/1210/AMP 加速版本」,转载请以链接形式注明出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 71 标签:  ,  ,  ,  , 

Redmi Note 9 4G 刷机欧洲EU版净化去广告

虽然口水苹果十三香,但是眼下囊中确实只有红米……到手不用 1000 大洋,试试也无妨,实在不行再找银行/东哥要十三香。 入手 Redmi Note 9 4G 缘由:领导的微信机 iPhone SE 一代确实很老了(再过两个月就开始第六个年头了),没有换过电池,进过水修过一次,现在经常尿崩突然就关机了得插上…

使用 GoAccess 分析 Nginx 日志

最近发现博客加载图片大多时候都是龟速,想过换服务器,换回主机(比如传说中的外贸主机 SiteGround),图片上 CDN……想了一圈,最终什么都没动,一是穷二是懒三是图片多茄大的水文并不多,先这样吧,实在不行再折腾。倒是忍不住折腾了一下 GoAccess 分析 Nginx 日志,分析了一圈,没什么用。 记录…
浏览: 141 标签:  ,  ,  , 

WordPress 纯代码实现彩色标签云及简单优化配置

WordPress 自带标签云小工具,侧栏直接添加即可,就是默认样式有点平淡,可以加点代码实现彩色标签云及简单优化一下。 WordPress 纯代码实现彩色标签云 代码丢到 WordPress 主题 functions.php 文件即可: //彩色标签云 tag cloudfunction theme_color_cloud_hook($text) { $text = preg_rep…
浏览: 63 标签:  ,  ,  ,  , 
浏览: 94 标签:  ,  ,  ,  , 

Comments:29

  1. 垃圾站-浮游
    浮游

    刚刚调了一下css样式,看你背景颜色不错,直接把背景颜色换成和你一样的,导航栏直接在背景色的基础上调整了一下

    2019.11.18 19:04 # 回复
    1楼
  2. 可以的,最后你会发现,还是原来的颜色更舒服。

    2019.11.19 01:06 # 回复
    2楼
  3. 搞黑白的干什么呀?不好看。

    2019.11.19 07:17 # 回复
    3楼
  4. 是自动黑夜模式?

    2019.11.19 08:05 # 回复
    4楼
  5. 还是原来的好,黑色不习惯呀

    2019.11.21 22:27 # 回复
    5楼
  6. 我也搞了一下,但还不完善,关键手头没mac,尴尬了,只在ios13看了下,哈哈。

    2019.11.22 21:11 # 回复
    6楼
  7. 已经加进去了。

    2019.11.28 21:06 # 回复
    7楼
    • @Sam.Z 貌似字体变色了,背景色没有变,缓存?

      2019.11.28 22:49 # 回复
      • @老杨 没有验证也,我都用的FF自带插件设置Dark模式,晚点我再试试,不行就cancel了。

        2019.11.28 22:52 # 回复
        • @Sam.Z 看了一下你 css,暗黑模式代码放最后,可以加上 !important

          2019.11.28 23:12 # 回复
          • @老杨 要得,电脑刚才关了,明天上班弄,好冷,早点进被窝

            2019.11.28 23:15 # 回复
  8. 垃圾站-xy
    xy

    @media (prefers-color-scheme: dark) 安卓手机不兼容吧,那安卓需要怎么判断暗黑模式嘛

    2020.04.26 08:53 # 回复
    8楼
    • @xy 不支持的可以上 js 吧,不过我只折腾了 css

      2020.04.26 10:28 # 回复
      • xy

        @老杨 if(window.matchMedia(“(prefers-color-scheme:dark)”).matches) js用了这个,也不兼容。

        2020.04.26 13:45 # 回复

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息