WordPress添加暗黑模式并集成到主题教程

之前用darkmode.js给主题适配了一个暗黑模式,操作很简单,但体验感不是很好,于是用了几天就干掉了。

暗黑模式

Darkmode.Js – 网站支持炫酷暗黑模式/夜间模式

昨晚在网上逛时无意发现了轻松让网站实现暗黑模式的小工具Darkmode.js, Darkmode.js是一个开源JavaScript项目,只一段代码就能快速让你的网站支持深色模式,非常強大!而且轻量易…

虽然能力有限,但折腾之心不死,这两天查找资料时意外发现了一个新方法,安装方法也很详细,感觉挺不错的,今天下午抽空折腾了一下。

实现过程

  1. 1. 给主题适配一个暗黑模式下的css样式:主要是背景、图片和文字,其它可以用主题原有样式。
  2. 2. 使用js控制切换,当切换至暗黑模式后class调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果,因此加入css样式时注意这点,不然无效。
  3. 3. 扩展:切换按钮和后台开关。

食用方法

主要是JS代码、css样式和切换按钮。

1. js代码

JS


<script type="text/javascript">
//夜间模式
(function(){
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
//默认22点到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*)night\s*\=\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*)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>

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

PHP


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

主要是cookie判断,判断如果你开启暗黑模式的cookie,如果有就输出night(达到暗黑效果),没有则空不开启。
有些主题下body已存在class了(没有可以忽略这一步),而且可能很多值,有可能会出现无效,这时可以写一个判断就ok啦。

PHP

function bodyclass() {
$class = '';

if ((is_single() || is_page()) && comments_open) {
$class .= ' comment-open';
}

if (is_supper_admin()) {
$class .= ' logged-admin';
}

if (xwz('aabbcc')) {
$class .= ' aabbcc';
}

if ($_COOKIE['night'] == '1' ? 'night' : '') {
$class .= ' night';
}

return trim($class)
}

3. CSS代码

根据自己的主题调试CSS,如前面所述主要从背景、文字和图片入手,颜色以暗黑为主,我是直接参考 safari 浏览器阅读模式的颜色,最后加了两个色后整理出来的由深到浅如下图所示:
暗黑模式

.night img是把图片降低亮度,.night xxx 覆盖原有样式。

CSS


<style type="text/css">
.night #footer,.night #kratos-header-section, .night .sf-menu li a:hover, .night #kratos-header-section .sub-menu a:hover {
background: #111;
}
.night, .night .sf-menu .current-menu-item, .night #kratos-header-section .sub-menu, .night .sf-menu .current-menu-parent { background-color: #1e1e1e !important; color: #d1d1d1 !important }
.night .pagination>a:hover, .night .kratos-entry-footer a:hover,.night .tag_clouds a:hover, .night .kratos-entry-footer a:hover,.night .sf-menu li a:hover { background: #1e1e1e; color: #d1d1d1; }
.night #kratos-widget-area .widget,.night .comment-respond,.night .comments-area .comment-list li,.night .hentry-content,.night .kratos-hentry,.night .kratos-post-meta-new,.night .kratos-post-text,.night .pagination { background-color: #323232; color: #d1d1d1 }
.night .kratos-post-content input,.night .kratos-post-content textarea { border: 1px solid #4a4a4a; background: #323232; color: #d1d1d1 }
.night #comments form input,.night #comments form textarea, .night #tabul .active,.night .card-header,.night .input-group-addon,.night .kratos-post-content h2,.night .kratos-post-content h4,.night .kratos-post-content ol,.night .pagination>a,.night .pagination>span,.night .post-content h2,.night .post-content h4, .night .kratos-entry-footer a,.night .sf-menu li.current-menu-item,.night .tag_clouds a, .night .kratos-entry-footer a, .night .today-m, .night #TA-con { background: #4a4a4a; color: #d1d1d1; }
.night .aplayer,.night .audio_wrp, .night .archives h3, .night .card-body, .night .today-d, .night .li-icon, .night .archives ol li:before { background-color: #4a4a4a; color: #d1d1d1 }
.night #kratos-blog .kratos-post .kratos-post-text p,.night #footer span,.night #footer span a,.night #respond #reply-title,.night .comments-area .fn a,.night .hentry-content a,.night .kratos-post-meta-new .read-more,.night .post-content,.night .sf-menu a,.night #kratos-header-section .sub-menu a,.night .widget a,.night .widget-title,.night label,.night ol,.night p,.night ul, .night .text-primary, .night article a { color: #d1d1d1 }
.night .kratos-entry-title,.night .kratos-post-inner-new a { color: #00a2ff }
.night .simple-item,.night .widget_kratos_comments .comment-listitem { border: 0 }
.night .comment p a, .night .kratos-post-meta span,.night .kratos-post-meta a { color: #464646 }
.night .gmeiCv,.night .libgWo,.night .libgWo * { color: #d1d1d1!important }
.night .aplayer .aplayer-lrc:after,.night .aplayer .aplayer-lrc:before { border: 0; background: 0 }
.night #comments form input,.night #comments form textarea,.night .input-group-addon { border: 1px solid #4a4a4a }
.night .comments-area .comment-list .children li { -webkit-box-shadow: 5px 5px 10px #1e1e1e; box-shadow: 5px 5px 10px #1e1e1e; }
.night .deng-box,.night .deng-box1,.night .deng-t { background: 0 !important; }
.night .home,.night .photo-background,.night .shici,.night img,.night svg, .night .aplayer-pic { filter: brightness(50%) } </style>

这是我的暗黑样式,边折腾功能边写的,不是很完美,后续慢慢完善吧。

4. 切换按钮

虽然 22 点到 6 点自动切换成暗黑模式,但也许有人不喜欢暗黑模式,所以可以加个按钮来人工切换。

HTML


<a href="javascript:switchNightMode()" target="_self">暗黑(文字或图标都可)</a>

至此基本都可以了,但追求完美的我感觉这个按钮可以更好些,如标准模式下按钮表示点击进入“暗黑”,而暗黑模式按钮要显示的为进入“标准”,很明显上面的那个按钮不管是在哪种模式下都显示“暗黑”,太过于单调了,于是我在此基础上做了一些修改:

HTML


<div class="darkmode">
<a href="javascript:switchNightMode()" target="_self">
<div class="moon" title="暗黑"><span class="fa fa-moon-o"></span></div>
<div class="sun" title="标准" style="display:none;"><span class="fa fa-sun-o"></span></div>
</a>
</div>

当然这样是不会切换的,还需要一个js来控制:

js


<script type="text/javascript">
$(document).ready(function(){
$(".darkmode").click(function(){
$(".moon").slideToggle();
$(".sun").slideToggle();
});
});
</script>

注意 js 里的值要和上面的对应,刚开始我把 class的标签用 day 和 night, 结果切换到正常模式下网页白茫茫一片,排查了半天最后才想到与 body中class标签名重复了以致 js让 body 直接 display:none 了。

最终效果大家可以点击右边滚动条的图标进行测试。
暗黑模式

集成扩展

这个功能实际上用的很少,大多时候也是图个新鲜了。如第一次折腾darkmode.js一样用了几天就没要了,当然不能每次删掉然后想用又从头折腾一次。于是想着在主题后台加个开关,没准过两天不喜欢关掉,想用又打开,这样虽然不用了,但是还是存在的。
打开主题 option framework框架下的 option.php 文件在适当的位置加上如下代码:

PHP

$options[] = array(
'name'=>'暗黑模式',
'desc'=>'是否开启暗黑模式',
'id'=>'dark_mode',
'std'=>'0',
'type'=>'checkbox'
);

这样后台就会显示开关了。
Wordpress暗黑并集成到主题设置

然后再在前台相关”按钮、CSS和js”那里加个判断。

PHP

<?php if ( kratos_option( 'dark_mode' ) ):?>
// 上面的按钮、css代码和js代码

<?php endif; ?>

参考文档

  1. 模式方法:https://nocilol.me/archives/code/add-night-mode-to-blog/
  2. 图片及背景滤镜:https://www.runoob.com/cssref/css3-pr-filter.html
  3. click()切换按钮:https://www.w3school.com.cn/jquery/event_click.asp
那年 • 今日
写于2021年3月1日
酸甜苦辣咸,五味调和,共存相生,百味纷呈。

赞助 点赞 26

loading导航, loadany, 秋刀鱼, 今日, 程志辉, 小陆花, cfanlost, 纬八路随笔, 老麦, Mr.Chou, 阿和, 青萌, 亮娃子生活日志, maqingxi等人对本文发表了26条热情洋溢的评论。
  • loadany说道: 0
    请教下,如何让显示“标准”和“黑暗”的图标和网站css显示保持一致呢,发现不管什么css下,页面刷新,右下角的小图标都是月亮。
    1. 老王说道:
      回复 loadany: 第4步切换按钮有讲呀,我用的是字体图标,你也可以换成图片。
      1. loading导航说道: 0
        回复 老王: 不着知道是不是我浏览器的问题,贵站黑暗和标准,无论在哪种模式下点击图标,图标都会切换下,但是刷新后,都会变成初始的月亮图标的状态,好奇怪。
  • loading导航说道: 0
    按照代码修改了下,可行,但是点击后需要刷新页面才能变换,这是啥原因呢,
  • 秋刀鱼说道: 0
    步骤2和3没看太明白,如果有定义的class的话,2代码不用,将3的代码放哪里呢? 3的代码怎么那么长
    1. 老王说道:
      回复 秋刀鱼: 第二步body的class是必须的,不过一般是不需要后面的那么多判断的。 第三步CSS部分根据自己的主题配置,不一定需要这么多,主要是修改字体、线条和背景颜色就可以了。
  • 今日说道: 0
    支持一下交个朋友
  • 发表回复

    您的电子邮箱地址不会被公开。 必填项已用*标注