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

老王 2021-03-01 5.4k ℃ 本文6147个字，预计阅读21分钟。
手机扫码浏览
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
那年 • 今日
  • 2020年 写给武汉小朋友的一封信
  • 2019年 春风十里，不如爱读书的你
    • 网页设计
    老王发布于2021-03-01 00:12
    楚客追梦情难休，万里追寻志未酬。

    赞助 点赞 0

    推荐阅读

    WordPress某篇文章显示所有评论者名称或头像
    WordPress文章归档页面分组和分页
    在折腾中寻找完美
    loading导航, loadany, 秋刀鱼, 今日, 程志辉, 小陆花, cfanlost, 纬八路随笔, 老麦, Mr.Chou, 阿和, 青萌, 亮娃子生活日志, maqingxi等人对本文发表了26条热情洋溢的评论。
  • loadany说道： LV.0
    回复
    2023-09-29 00:20 Chrome Windows 10 北京市
    请教下，如何让显示“标准”和“黑暗”的图标和网站css显示保持一致呢，发现不管什么css下，页面刷新，右下角的小图标都是月亮。
    1. 老王说道：
      回复
      2023-09-29 16:09 Safari MacOS 10 广东省
      回复 loadany: 第4步切换按钮有讲呀，我用的是字体图标，你也可以换成图片。
      1. loading导航说道： LV.0
        回复
        2023-10-03 21:54 Chrome Windows 10 河北省石家庄市
        回复 老王: 不着知道是不是我浏览器的问题，贵站黑暗和标准，无论在哪种模式下点击图标，图标都会切换下，但是刷新后，都会变成初始的月亮图标的状态，好奇怪。
  • loading导航说道： LV.0
    回复
    2023-09-28 16:20 Chrome Windows 10 河北省张家口市
    按照代码修改了下，可行，但是点击后需要刷新页面才能变换，这是啥原因呢，
  • 秋刀鱼说道： LV.0
    回复
    2022-11-02 19:30 Chrome Windows 10 江苏省
    步骤2和3没看太明白，如果有定义的class的话，2代码不用，将3的代码放哪里呢？ 3的代码怎么那么长
    1. 老王说道：
      回复
      2022-11-02 20:29 Safari MacOS 10 中国
      回复 秋刀鱼: 第二步body的class是必须的，不过一般是不需要后面的那么多判断的。 第三步CSS部分根据自己的主题配置，不一定需要这么多，主要是修改字体、线条和背景颜色就可以了。
  • 今日说道： LV.0
    回复
    2021-03-09 20:18 Chrome Windows 10 江苏省南京市
    支持一下交个朋友

    • 发表回复

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