最近看到几个友链都弄了跟随系统暗色的夜间模式,然后我也去捣鼓了一下,从友人陆小北哪里学习到了如何配置,甚是感谢
注意:只对Handsome主题进行了测试,其余主题自行测试
配置方法
1,下载夜间模式配置文件
点击下载
下载上面的css和js文件,分别放到到
/usr/themes/handsome/assets/css/darkmode.css
/usr/themes/handsome/assets/js/darkmode.js
2,修改主题文件
-
打开文件
/usr/themes/handsome/component/footer.php
找到<!--主题核心js--> <script src="<?php echo STATIC_PATH ?>js/function.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag ?>"></script>
在下面加入
<!--darkmode.js--> <script src="<?php echo STATIC_PATH ?>js/darkmode.js?v=dedediy"></script>
- 打开文件
/usr/themes/handsome/component/header.php
找到<style type="text/css"> <?php echo Content::exportCss($this) ?> </style>
在下面加入
<!--darkmode.css-->
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/darkmode.css?v=dedediy" type="text/css" />
- 打开文件
/usr/themes/handsome/component/headnav.php
找到<?php if (!in_array('hideLogin',$this->options->featuresetup)): ?>
在上面加入
<!--darkmode start--> <li> <a class="nav-switch-dark-mode" href="javascript:"> <span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 夜晚模式 "> <i data-feather="sun"></i> </span> <span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 日间模式 "> <i data-feather="moon"></i> </span> </a> </li> <!--darkmode end-->
完成上述操作,夜间模式就和系统深色模式一致啦
自动进入夜间模式配置
- 打开
/usr/themes/handsome/assets/js/darkmode.js
找到if(new Date().getHours() > 22 || new Date().getHours() < 6)
数字22和6就是表示在晚上22点和早上6点之间为夜间模式,修改为你需要的时间数字即可。
版权属于:奥秘Sir(除特别注明外)
本文链接:https://blog.say521.cn/archives/193.html
本站文章采用 知识共享署名4.0 国际许可协议进行许可,请在转载时注明出处及本声明!
这blog主题叫什么,想搞个
handsome
做成插件了 嘿嘿~
https://www.ddg.ink/69.html
该退役了,主题内置了
夜间模式看的不舒服。
我也有点觉得,搞都搞了
代码高亮用的啥?
插件CodeHighlighter