自己动手给网站增加一个夜间模式

楼主：Evil son [1级] · 2020-4-9 · 浏览1286 · 编程源码 · ID:

今天教大家怎么给自己的网站添加一个夜间模式，当然代码不是我制作开发的我不生产代码，我只是代码的搬运工，好了不多说废话，这个代码是在网上找到，也不知道原始作者是谁，感谢您的无私奉献。好了，废话少说，开始表演。。。

- 版权声明 - 1、本帖所有言论和图片等纯属网友个人意见，与流星社区立场无关；
2、其他单位或个人使用、转载或引用本帖时必须同时征得该帖子作者Evil son和流星社区的同意；
3、备注原文地址：https://bbs.liuxingw.com/t/26266.html，可忽略第2条；
4、帖子作者需承担一切因本文发表而直接或间接导致的相关责任；
5、如本帖内容或部分内容转载自其它媒体，这并不代表本站赞同其观点和对其真实性负责；
6、如本帖若为资源类，将仅限用于学习和研究目的，您必须在下载后的24个小时之内，从您安装或使用的设备中彻底删除上述内容；
7、如果您喜欢该程序，请支持正版软件，购买注册，可以得到更好的正版服务；
8、如本帖侵犯到任何版权或违法问题，请立即邮件告知我们，我们将及时予以处理。

17条回复 | 最后回复于2020-4-9

Evil son [1级]

1.首先，我们需要在主题模板中打开“footer.php”文件，在“”前添加如下代码：

JavaScript

发布于2020-4-9

回复列表

内容加载中...

说点什么...

Evil son [1级]

2.保存文件即可，如果想要实现自动切换夜间模式，那么直接复制如下代码：
JavaScript

代码中的 22 和 5 就是晚上22点开始到第二天的5点结束，其实这段代码并不严谨，为什么这么说呢？此代码是针对没有记录cookies的网站来说有效，一旦手动开启或者关闭过夜间模式，那么这个自动是失效了，除非清空浏览器的cookies，总之这里目前没有办法完美适配（我技术不行），其实我们可以在js做个判断，就是每天的22点时候判断cookies是否是夜间模式，如果不是，弹出对话框询问是否开启夜间模式，如果是就不提示。这么说您应该晓得吧，说的简单，但是，，，我不会写。。。咳咳！

发布于2020-4-9

回复列表

内容加载中...

说点什么...

Evil son [1级]

3.然后打开网站的“header.php”文件，我们需要给网站填写一个按钮，以此来手动开启和关闭夜间模式：
Markup

复制如上代码，放在你认为合适的地方，然后保存，登录后台，清空主题模板缓存编译，然后打开首页，测试夜间模式是否有效。

发布于2020-4-9

回复列表

内容加载中...

说点什么...

Evil son [1级]

4.其实教程到这才算是完成一般，因为你在测试的过程中会发现，开启夜间模式并没有效果，，，嗯嗯是的，因为你们没有适配夜间模式的css，这个教程写不出，因为每个主题模板的div框架和css命名不同，无法统一，所以需要您自己去查找对应的class类，然后添加夜间模式的样式，例如：
CSS
body.night DIV名称 {
background-color: #263238;
color: #aaa; }
这样一来开启夜间模式后背景色就换成了黑色，字体是白色，如果网站css框架太多，相信我这绝对是一个大坑，哦对了，防止css样式重叠，建议在css样式表最底下适配夜间模式的代码。

发布于2020-4-9

回复列表

内容加载中...

说点什么...

Evil son [1级]

5.这些都配置完成，前台查看首页，你会发现在夜间模式下会出现闪屏，就是，打开一个页面的瞬间是正常模式，然后在1秒（电脑速度慢的时候可不止1秒）后转换成夜间模式，哇塞，简直就是亮瞎眼有木有？别急，教你一个办法，打开“header.php”文件，在上添加如下代码：（此代码仅限Z-Blog）
Markup

其他程序（TP5或者Typecho等）使用这个：

Markup
">
这样就解决闪屏的BUG了，当检测到cookie相关字段时直接输出body的class为night，就可以已防止页面闪烁。

发布于2020-4-9