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

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

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

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

实现过程

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

食用方法

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

1. 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,防止页面闪烁。



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

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


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 覆盖原有样式。



<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 点自动切换成暗黑模式,但也许有人不喜欢暗黑模式,所以可以加个按钮来人工切换。



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

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



<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来控制:



<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 文件在适当的位置加上如下代码:


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

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

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


<?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
今日, 程志辉, 小陆花, cfanlost, 纬八路随笔, 老麦, Mr.Chou, 阿和, 青萌, 亮娃子生活日志, maqingxi等人对本文发表了20条热情洋溢的评论。
  1. 今日说道: 0 Chrome Windows 10

    支持一下交个朋友

发表评论

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