此功能基于两位前辈的文章。如下:
- https://imjad.cn/archives/code/add-night-mode-to-blog/
- https://xptt.com/653884.html
之前就有想法给主题适配一个暗黑模式，但就于目前大家的暗黑模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候，发现暗黑主题还蛮好玩的，开搞！
网上关于WordPress暗黑模式的文章好像也不少，大多是基于Darkmode.js的
GItHub:https://github.com/sandoche/Darkmode.js
有插件类型的,也有代码适配的。（插件我都已经汉化过了，发现并不好用，遂放弃）
正文开始，实现的方法并不难，难的是适配和整合。
- 首先简单的思路就是给主题样式表适配写一套黑色模板的css，主要是背景，图片和文字等适配。css是最复杂工程量最大的。日主题的暗黑模式css我写了一下午（第一次写都有写注释）
- 然后使用js控制切换，当切换至暗黑模式后class 调用适配暗黑的css，由于css层级优先关系就达到了暗黑的效果。
- 下面教程开始，教程部分引入自: 郑永博客 我会在教程下边记一下后台适配开关及遇到的问题解决方法。
首先加入js代码，你可以扔footer页脚：
代码语言：javascript复制<script type="text/javascript">
//夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
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');
}
}
})();
//夜间模式切换
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>其次在header页头的body加入php判断，检测到cookie相关字段直接输出body class为night，防止页面闪烁。
代码语言：javascript复制<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">最后，调试CSS，body.night xxx ，xxx覆盖替换的css样式，body.night img 是把图片降低亮度，有些地方图片如果没有降低亮度，那么也像前面那样加入。
代码语言：javascript复制body.night xxx{
background-color: #263238;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}我的css修改例子，看一下应该就懂了。
代码语言：javascript复制<style>
body.night, body.night #body, body.night .page_navi a.current {
background-color: #263238!important;
color: #888282!important;
}
body.night #sidebar, body.night .next-page a {
background-color: #263238;
color: #888282;
}
body.night #content .post p a, body.night .floor {
color: #af8f77;
}
body.night .shang {
color: #263238;
}
body.night .shang {
background-color: #ab9a6d;
}
body.night img, body.night .icon_qq, body.night .icon_facebook, body.night .icon_rss, body.night .icon_weixin, body.night .icon_github, body.night .bozhugravatar a, body.night .left-col {
filter: brightness(50%);
}
body.night a, body.night a:link, body.night a:visited {
color: #989292;
}
body.night #comments form textarea, body.night #comments form input {
background-color: #263238;
color: #888282;
}
body.night #content .menufeng {
border-bottom: 1px solid #989292;
}
body.night #footer, body.night #xgwz, body.night #comments {
border-top: 1px solid #989292;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
border: 1px solid #989292;
}
body.night #nav .menu ul{
background: #3e4c52;
}
</style>OK，只要客户端时间是22点到6点之间，就自动切换到夜间模式，你也可以用下面的代码来弄一个按钮在页面上，方便随时切换。
代码语言：javascript复制<a href="javascript:switchNightMode()" target="_self">查看效果</a>OK，结束，前面简单，后面css部分比较费时一些，如果你的主题够简单，那也很快，不然的话就得考验你耐心了。
到这里基本就能实现暗黑模式了，这个方法不只适用于WordPress，适用于几乎所有网站。
一，集成到后台
因为我知道这个功能实际上用的很少，大多时候也是图个新鲜了。所以给主题后台加个开关。没准过两天就不喜欢关掉了。但是这个功能可以不用，但是得有！
用前可在参考一下这篇文章
WordPress主题 之后台添加控制切换按钮表单控件
上一篇文章我们说到加灯笼，在给新站加灯笼的时候想着给后台加一个控制开关，来控制前台是否显示灯笼控件。 效果 实例: 基于…
首先看一下我的效果吧。并且加了一个开启暗黑后的logo，增强用户体验。
实现方法。和上边说的那篇文章一样。新建一个切换开关，让这个开关控制网站前台 开启暗黑的 按钮 。即可实现。
代码示例:
开启效果:
关闭后开关则不会显示，和挂灯笼那篇文章一个模子。
主题开关说完了，说一下上边那个暗黑模式logo适配吧。先看一下效果:
不同模式下，显示不同颜色的logo，避免暗黑模式后logo都看不见了。可以增强用户体验。
实现方法，其实也非常的简单，首先主题的logo显示不能直接用img标签写，要用background-image 这个属性来写，就是背景图像。因为我们现在使用的暗黑方案只能控制css，用img写死了就不行了。当然你也可以用js来实现，只是我不会（愧对海亮老师的课！
）
看一看代码你就明白了
代码语言：javascript复制<div class="cs-footer-logo zmki_footer_logo">
<a style="background-image: url(<?php echo _hui_img('header_logo'); ?>)"></a>
</div>由于我们引用了zmki_footer_logo这个css类，在切换回暗黑模式后，会自动使用body.night .zmki_footer_logo这个类，我们只需要给body.night .zmki_footer_logo这个写一个背景图像background-image属性即可，然后加上!important增加优先级。这样子就能实现暗黑模式输出另一张图片效果。
css示例
代码语言：javascript复制 <style>
/*暗黑logo适配*/
body.night .logo a , body.night .zmki_footer_logo a {
background-image: url(<?php echo _hui_img('header_logo_anhei'); ?>)!important;
}
</style>因为我们想在后台加一个可以控制暗黑模式logo的表单，那么这个css如果写死到style样式表里每次换暗黑logo还要去样式表里修改。不能将就！
那么问题来了，后台选项表单创建好了，函数也能引用。但是.css样式表科学的讲并不能插入PHP代码。
一番思考后发现，既然不能把php写到css文件里，那就把css写到php文件里。结果是可行的，php果然是世界上最好的语言。
看下图应该能好理解了。非常简单。
说一下最后一个问题，还记得上边代码里的
代码语言：javascript复制<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">这一句，就是很简答一个cookie判断，判断如果你开启暗黑模式的cookie，如果有就输出night（达到暗黑效果），没有则空不开启。
可是日主题就非常操蛋的这样子写，
上边的body是我们的判断cookie，下边的body是日主题封装好的class，根本不给修改的地方，结果就是前端排版出错。
在日主题身上徘徊搜索后定位到文件。然后仿照着它接上一个判断
ok大功告成。
其实日主题还是不错的，相比于7B2,修改起来的频繁报错。这家伙二开魔改起来简直游刃有余，原来是我符合日主题的定位: 真男人！日主题真香。待上线补票！
下面发几张暗黑模式效果图，和部分由博主适配的日主题暗黑模式css。仅供参考
部分CSS（钻芒博主适配）
代码语言：javascript复制/*首页大搜索*/
body.night .focusbox .container {
filter: brightness(70%);
}
/*首页轮播*/
body.night .swiper-container{
filter: brightness(70%);
}
/*全局背景*/
body.night .container-white{
background-color: #232323;
}
/*首页分类推荐模块背景*/
body.night .cms-category .category-tile{
background: #000;
}
/*首页文章模块 背景*/
body.night .excerpt{
background-color: #111111;
}
/*会员加入展示*/
body.night span.counter{
background: #000;
color: #ce0000;
}
/*造轮子文字*/
body.night .home2 h3, body.night .home2 p{
color: #a1a1a1;
}
body.night a, body.night a:link, body.night a:visited {
color: #c8c8c8;
}
/*造轮子按钮*/
body.night .btn-wiht {
border-color: #4a4a4a;
}
/*首页会员开通*/
body.night .home-vipbox{
background: #000;
}
/*分类中心*/
body.night .filters {
background-color: #000;
color: #c3c3c3;
}
body.night .post-like, .post-price {
filter: brightness(80%);
}
/*文章页 文字和 背景*/
body.night .article-content {
color: #a8a8a8;
background-color: #353535;
}
/*小工具背景*/
body.night .widget {
background-color: #353535;
}
/*文章页 H标题*/
body.night .article-content h1,
body.night .article-content h2,
body.night .article-content h3,
body.night .article-content h4,
body.night .article-content h5,
body.night .article-content h6{
color: #fff;
}
/*搜索小工具*/
body.night form.inline .inline-field {
background-color: #353535;
border: 0px solid #f1f1f1;
}
/*关注我们小工具*/
body.night .social-widget-link {
position: relative;
margin-bottom: 10px;
position: relative;
display: block;
font-size: 13px;
background: #353535;
color: #a6a6a6;
line-height: 40px;
padding: 0 14px;
border: 0px solid #DDD;
border-radius: 2px;
}
WordPress暗黑模式相关链接:
- Darkmode.js CDN: www.bootcdn.cn/Darkmode.js
- Darkmode.js Github: github.com/sandoche/Darkmode.js
- Darkmode.Js官网: darkmodejs.learn.uno
- 暗黑插件Blackout: zmingcx.com/blackout-dark-mode-widget.html
- 向日葵全家桶(AD) 在建: www.k1v.cn
