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 unread messages

秋刀鱼, 今日, 程志辉, 小陆花, cfanlost, 纬八路随笔, 老麦, Mr.Chou, 阿和, 青萌, 亮娃子生活日□□□志, maqingxi等人对本文发表□□□□了22条热情洋溢的评论□□□。
  • 秋刀鱼说道: 0
    步骤2和3没看太明白,如果有定义□□□□的class的话,2代码不用,将3的代码放哪里呢□□□□□□□□? 3的代码怎么那么□□□□□□长
    1. 老王说道:
      回复 秋刀鱼: 第二步body的class是必须的,不过一般是不需要后面的那么多判断的□□□□□□□□。 第三步CSS部分根据自己的主题配置□□□□□□□,不一定需要这么多□□□□□□□,主要是修改字体□□□□、线条和背景颜色就可以了□□□。
  • 今日说道: 0
    支持一下交个朋□□□□友
  • 发表回复

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