Loading... <div class="tip share">请注意，本文编写于 820 天前，最后修改于 168 天前，其中某些信息可能已经过时。</div> 之前根据[陆小北][1]的文章为Handsome主题添加了夜间模式，现在我修改了一些细节。 ---------- <div class="tip inlineBlock warning"> 新版hondsome已自带夜间模式 </div> ## 修改内容 - 取消判断Cookie强制根据时间改变夜间模式（按钮切换仍然有效）； - 添加移动端顶部导航栏切换按钮； - 部分细节优化； - more…… ![移动端顶部切换按钮][2] ## 下载与上传文件 - 分别下载darkmode.css与darkmode.js; <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div> - 分别上传到Handsome主题对应目录下： - /usr/themes/handsome/assets/css/darkmode.css - /usr/themes/handsome/assets/js/darkmode.js ## 修改Handsome主题代码 - 首先参照作者文章完成操作：[陆小北][3]； - 打开/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'); } }*/ ``` 即可； - [宝硕][4]已发布夜间模式插件：[Darkmode for handsome][5]； - 如有问题请评论留言； ## 感谢 - 感谢原作者 [陆小北][6]：[typecho博客程序Handsome主题实现一键切换夜间模式，支持指定时间进入夜间模式和跟随系统深色模式][7]； - 感谢 [宝硕][8]：[宝硕小站][9]提供的修改代码； [1]: https://dedediy.cn/default/share-104.html [2]: https://blog.zyong.vip/photo/darkhtml/2.png [3]: https://dedediy.cn/default/share-104.html [4]: https://www.baoshuo.ren [5]: https://dedediy.cn/default/share-104.html [6]: https://dedediy.cn/ [7]: https://dedediy.cn/default/share-104.html [8]: https://www.baoshuo.ren/ [9]: https://www.baoshuo.ren/ 最后修改：2022 年 01 月 17 日 © 允许规范转载 赞 0 如果想要赞赏，我绝不阻拦
10 条评论
你好，我参考进行修改，然后发现，每次刷新页面，夜间模式都会失效
因为根据时间自动切换优先，是这样设定的
能取消这个时间设定么？直接点击切换过去，再点击才能切换回来？
我看博主的并没有出现这个失效的情况啊
参考文章中的“补充”
你是说，需要将你注释的那个部分取消注释？
是的
好的，感谢，但是不知道为什么，夜间模式的切换速度显得有点卡慢
我这里切换很快
夜间模式看起来很不错。
基于陆小北的夜间模式做的 [陆小北](https://dedediy.cn/default/share-104.html)