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

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

<script type="text/javascript">
function switchNightMode(){var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\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*)night\s*\=\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*)night\s*\=\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*)night\s*\=\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;
}

这样一来开启夜间模式后背景色就换成了黑色，字体是白色，如果网站css框架太多，相信我这绝对是一个大坑，哦对了，防止css样式重叠，建议在css样式表最底下适配夜间模式的代码。

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

<body class="{if GetVars('night','COOKIE') } night{/if}">

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

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

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

自己动手给网站增加一个夜间模式相关推荐

html 在线聊天工具,给你的外贸网站增加一个在线聊天工具吧
给你的外贸网站增加个在线聊天工具,你知道如何加在线聊天工具吗,在线聊天工具使用哪家的好呢? 我们要做个好的外贸网站,就需要不断的改善网站的客户体验,让你的网站有更好的成交转换率.其中,给网站增加个在线 ...
【网站】给网站添加一个夜间模式切换按钮
使用CSS和JavaScript在明暗模式之间切换. 1.添加CSS 设置<body>元素的样式并创建.dark-mode用于切换的类 body {padding: 25px;backgr ...
nginx 使用 ngx_http_auth_basic_module 模块，给网站增加一个身份认证代理
以 phpMyAdmin 网站为例将 phpMyAdmin 隐藏在认证代理后面,这样用户在向 phpMyAdmin 提供 MySQL 凭证之前就需要进行认证官方文档. 官方文档 Module ngx ...
苹果WWDC 2019最全剧透抢先看：iOS夜间模式要来了！
苹果全球开发者大会(WWDC)将于6月3日开幕.届时,该公司将推出一系列新的应用程序.功能和开发工具,并将对iPhone.iPad.Mac.Apple Watch和Apple TV等设备所运行的操作系 ...
分享一个实现夜间模式的浏览器扩展
最近花了些时间,做一个浏览器上实现夜间模式的扩展.目前已在谷歌.火狐.360浏览器中上架,从浏览器扩展/附加组件中搜索"夜间助手"即可安装使用. 一些演示为什么要做这个扩展? 就 ...
android官方夜间模式,Android实现夜间模式的方法（一）
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近整理了几篇在乐视实习时写的文章,都是一些简单的技术调研,Android夜间模式是当时做技术分享的内容,供大家参考,欢迎一起讨论~ 一.夜间模式 ...
android官方夜间模式,Android夜间模式实践
前言由于项目需要,近段时间开发的夜间模式功能.主流的方案如下: 1.通过切换theme实现 2.通过resource id映射实现 3.通过Android Support Library的实现方案 ...
oppo计算机的夜间模式,oppo夜间模式如何打开
手机型号:OPPO R9 1.打开手机,在手机桌面找到设置选项,点击进入. 2.在设置界面中,找到显示与亮度选项,点击进入. 3.在现实与亮度界面中,找到夜间护眼选项,点击进入. 4.在夜间护眼界面中 ...
Android夜间模式实践
前言由于项目需要,近段时间开发的夜间模式功能.主流的方案如下: 1.通过切换theme实现 2.通过resource id映射实现 3.通过Android Support Library的实现方案 ...

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

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

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

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

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

这样一来开启夜间模式后背景色就换成了黑色，字体是白色，如果网站css框架太多，相信我这绝对是一个大坑，哦对了，防止css样式重叠，建议在css样式表最底下适配夜间模式的代码。

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

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

自己动手给网站增加一个夜间模式相关推荐

最新文章

热门文章