WordPress添加夜间模式cookie版

这两天突然聊起博客主题带夜间模式,瞬间一只夜猫从脑后飘过,关灯后看文章确实刺眼,当然也可以调节手机亮度,但确实很少人会在关灯后看手机,对眼睛伤害很大。

本来这个功能无需折腾,比如腾讯浏览器手机版就有夜间模式,任何网站都可以瞬间变成夜间模式,效果也很好~ 但是!好吧,我们的个人博客是体贴到极致,不折腾不铁血。

原以为挺简单的,只需要搞两个CSS,互相切换一下就OK,后来发现这还得用到cookie,否则刷新一下就又恢复了,好吧,其他人一定搞过,既然有人做了,就不用再费脑子了。

搜了一下,发现有两种方法,第一种用遮的,懒人法,效果并不好,第二种就是通过JS+CSS控制,肯定选这种了,及时是这样,也很难搜到好的方法教程。

经过一番查找,终于找到猫与向日葵博客分享的这个方法:传送门!OK,废话不说了,点击看本站效果:查看效果

由于原文不适合新手,我特意重新整理如下:

首先加入js代码,你可以扔footer页脚:

  1. <script type="text/javascript">
  2.     //夜间模式
  3. (function(){
  4.     if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
  5.         if(new Date().getHours() > 22 || new Date().getHours() < 6){
  6.             document.body.classList.add('night');
  7.             document.cookie = "night=1;path=/";
  8.             console.log('夜间模式开启');
  9.         }else{
  10.             document.body.classList.remove('night');
  11.             document.cookie = "night=0;path=/";
  12.             console.log('夜间模式关闭');
  13.         }
  14.     }else{
  15.         var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
  16.         if(night == '0'){
  17.             document.body.classList.remove('night');
  18.         }else if(night == '1'){
  19.             document.body.classList.add('night');
  20.         }
  21.     }
  22. })();
  23. //夜间模式切换
  24. function switchNightMode(){
  25.     var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
  26.     if(night == '0'){
  27.         document.body.classList.add('night');
  28.         document.cookie = "night=1;path=/"
  29.         console.log('夜间模式开启');
  30.     }else{
  31.         document.body.classList.remove('night');
  32.         document.cookie = "night=0;path=/"
  33.         console.log('夜间模式关闭');
  34.     }
  35. }
  36. </script>

其次在header页头的body加入php判断,检测到cookie相关字段直接输出body class为night,防止页面闪烁。

  1. <body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

最后,调试CSS,body.night xxx ,xxx覆盖替换的css样式,body.night img 是把图片降低亮度,有些地方图片如果没有降低亮度,那么也像前面那样加入。

  1. body.night xxx{
  2.     background-color#263238;
  3.     color#aaa;
  4. }
  5. body.night img {
  6.     filter: brightness(30%);
  7. }

我的css修改例子,看一下应该就懂了。

OK,只要客户端时间是22点到6点之间,就自动切换到夜间模式,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。

  1. <a href="javascript:switchNightMode()" target="_self">查看效果</a>

OK,结束,前面简单,后面css部分比较费时一些,如果你的主题够简单,那也很快,不然的话就得考验你耐心了。

分类:网络博客 标签:,,,

上一篇:搬瓦工双十一VPS促销

下一篇:更新css js同时更新客户端浏览器的缓存

已经有20条评论!

Loading...
  1. 挺好的!

    沙发!
  2. 从来没有用过夜间模式,总感觉看着别扭。

    地板!
  3. 我是夜猫,感觉挺好的,;-)

    4F
  4. [眨眼] 中午发出来了,我也要使劲折腾了。

    5F
  5. 其实就是 2 套 css 配色吧,哈,懒得折腾,访客自己用类似 f.lux 的软件吧,经常囧文的我就不替访客操心了

    6F
  6. 好东西,先码一个,鸟哥主题的CSS太复杂了,适配好难 [恶魔]

    7F
  7. 我一来就看到这个“灯泡”了!体验很不错!

    8F
  8. 这个功能不错,有时间折腾到主题进去

    9F
    • @灰狼 嗯,黑了以后蓝色字有问题,很神奇,于是就批量把文章蓝色字替换掉其他颜色,哈哈。

  9. 挺好的。之前我简单的用php根据东八区自动调节主题颜色。这个方法更强大。

    10F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑