正文：
自己动手给网站增加一个夜间模式！夜间模式为了迎合夜晚，让你从视觉上感到光线变暗，就会想办法把屏幕变暗，这样屏幕整的亮度和夜间环境更接近，就能让你在晚上浏览网站不那么辣眼睛。
教程开始
首先，我们需要在主题模板中打开“footer.php”文件，在“
赏
微信扫一扫
支付宝扫一扫
自己动手给网站增加一个夜间模式！夜间模式为了迎合夜晚，让你从视觉上感到光线变暗，就会想办法把屏幕变暗，这样屏幕整的亮度和夜间环境更接近，就能让你在晚上浏览网站不那么辣眼睛。
首先，我们需要在主题模板中打开“footer.php”文件，在“
< script type＝"text/javascript"> function switchNightMode(){ var night ＝ document.cookie.replace(/(?:(?:^|.*;s*)nights*＝s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night ＝＝ ‘0‘){ document.body.classList.add(‘night‘); document.cookie ＝ "night＝1;path＝/" console.log(‘夜间模式开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie ＝ "night＝0;path＝/" console.log(‘夜间模式关闭‘); } } < /script>
保存文件即可。如果想要实现自动切换夜间模式，那么直接复制如下代码：
< script type＝"text/javascript"> function switchNightMode(){ var night ＝ document.cookie.replace(/(?:(?:^|.*;s*)nights*＝s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night ＝＝ ‘0‘){ document.body.classList.add(‘night‘); document.cookie ＝ "night＝1;path＝/" console.log(‘夜间模式开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie ＝ "night＝0;path＝/" console.log(‘夜间模式关闭‘); } } (function(){ if(document.cookie.replace(/(?:(?:^|.*;s*)nights*＝s*([^;]*).*$)|^.*$/, "$1") ＝＝＝ ‘‘){ if(new Date().getHours() > 22 || new Date().getHours() < 5){ document.body.classList.add(‘night‘); document.cookie ＝ "night＝1;path＝/"; console.log(‘夜间模式自动开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie ＝ "night＝0;path＝/"; console.log(‘夜间模式自动关闭‘); } }else{ var night ＝ document.cookie.replace(/(?:(?:^|.*;s*)nights*＝s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night ＝＝ ‘0‘){ document.body.classList.remove(‘night‘); }else if(night ＝＝ ‘1‘){ document.body.classList.add(‘night‘); } } })();</ script>
代码中的 22 和 5 就是晚上 22 点开始到第二天的 5 点结束。
请注意，此代码是针对没有记录 cookies 的网站来说有效，一旦手动开启或者关闭过夜间模式，那么这个自动切换就会失效，除非清空浏览器的 cookies。为了解决这个问题，我们可以在 js 中添加一个判断，每天的 22 点时判断 cookies 是否是夜间模式，如果不是，弹出对话框询问是否开启夜间模式，如果是就不提示。 然后打开网站的“header.php”文件，我们需要给网站添加一个按钮，以此来手动开启和关闭夜间模式：
<a class＝"at-night" href＝"javascript:switchNightMode()" target＝"_self"></a>
复制如上代码，放在你认为合适的地方，然后保存。登录后台，清空主题模板缓存编译，然后打开首页，测试夜间模式是否有效。 其实教程到这才算是完成一般，因为你在测试的过程中会发现，开启夜间模式并没有效果。这是因为你们没有适配夜间模式的css。由于每个主题模板的 div 框架和 css 命名不同，无法统一，所以需要您自己去查找对应的 class 类，然后添加夜间模式的样式，例如：
body.night DIV 名称 {background-color: #263238;color: #aaa; }
其他程序（TP5 或者 Typecho 等）使用这个：
<body class＝"<?php echo($_COOKIE[‘night‘] ＝＝ ‘1‘ ? ‘night‘ : ‘‘); ?>">
这样就解决闪屏的 BUG 了，当检测到 cookie 相关字段时直接输出 body 的 class 为 night，就可以防止页面闪烁。
转载请注明：汇站网 » 为 WordPress 网站增加一个夜间模式按钮
汇站网 WordPress教程 为WordPress网站增加一个夜间模式按钮 https://www.huizhanii.com/34396.html
