请注意,本文编写于 1341 天前,最后修改于 689 天前,其中某些信息可能已经过时。
之前根据陆小北的文章为Handsome主题添加了夜间模式,现在我修改了一些细节。
新版hondsome已自带夜间模式
修改内容
- 取消判断Cookie强制根据时间改变夜间模式(按钮切换仍然有效);
- 添加移动端顶部导航栏切换按钮;
- 部分细节优化;
- more……
下载与上传文件
- 分别下载darkmode.css与darkmode.js;
此处内容需要评论回复后(审核通过)方可阅读。
- 分别上传到Handsome主题对应目录下:
- /usr/themes/handsome/assets/css/darkmode.css
- /usr/themes/handsome/assets/js/darkmode.js
修改Handsome主题代码
- 首先参照作者文章完成操作:陆小北;
- 打开/usr/themes/handsome/component/headnav.php,找到
<?php echo Content::slectNavbarHeader(); ?>
<button class="pull-right visible-xs" ui-toggle-class="show animated animated-lento fadeIn" target=".navbar-collapse">
<span class="menu-icons"><i data-feather="search"></i></span>
</button>
在下面加入
<!--移动端夜间模式切换按钮-->
<button class="pull-right visible-xs" >
<a class="nav-switch-dark-mode" href="javascript:">
<span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="">
<i data-feather="sun"></i>
</span>
<span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="">
<i data-feather="moon"></i>
</span>
</a>
</button>
- 完成以上操作,定时或按钮切换夜间模式就实现了;
修改自动进入夜间模式的时间
打开/usr/themes/handsome/assets/js/darkmode.js,找到
if(new Date().getHours() > 22 || new Date().getHours() < 7){
数字
22
和7
表示在晚上22点
和早上6点
之间为夜间模式,修改为你需要的时间即可;
补充
- 我注释掉了跟随系统深色模式的代码,如有需要在
/usr/themes/handsome/assets/css/darkmode.css
中取消注释/*跟随系统模式
与其后面的全部代码即可; - 原作者作品,在定时进入夜间模式时会先判断Cookie,导致在很多情况下不能定时进入夜间模式,我修改为不进行Cookie判断,根据时间强制开启/关闭夜间模式(按钮切换仍有效),如需要先判断,可以打开
/usr/themes/handsome/assets/js/darkmode.js,取消注释
//if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") == ''){
以及
/*}else{
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
$('body').removeClass('night');
$('html').removeClass('night');
$('.icon-light-mode').css('display','block');
$('.icon-dark-mode').css('display','none');
}else if(night == '1'){
$('body').toggleClass('night');
$('html').toggleClass('night');
$('.icon-light-mode').css('display','none');
$('.icon-dark-mode').css('display','block');
}
}*/
即可;
- 宝硕已发布夜间模式插件:Darkmode for handsome;
- 如有问题请评论留言;
感谢
- 感谢原作者 陆小北:typecho博客程序Handsome主题实现一键切换夜间模式,支持指定时间进入夜间模式和跟随系统深色模式;
- 感谢 宝硕:宝硕小站提供的修改代码;
10 条评论
你好,我参考进行修改,然后发现,每次刷新页面,夜间模式都会失效
因为根据时间自动切换优先,是这样设定的
能取消这个时间设定么?直接点击切换过去,再点击才能切换回来?
我看博主的并没有出现这个失效的情况啊
参考文章中的“补充”
你是说,需要将你注释的那个部分取消注释?
是的
好的,感谢,但是不知道为什么,夜间模式的切换速度显得有点卡慢
我这里切换很快
夜间模式看起来很不错。
基于陆小北的夜间模式做的 [陆小北](https://dedediy.cn/default/share-104.html)