夜晚日间模式效果
效果图
一、夜间模式js和css文件下载上传
下载上面的文件，js和css分开上传到Handsome主题对应目录下，路径如下：
CSS和JS
点击下载
/usr/themes/handsome/assets/css/darkmode.css
/usr/themes/handsome/assets/js/darkmode.js
二、Handsome主题需要修改的文件
打开/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>
<script src="<?php echo STATIC_PATH ?>js/core.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-->
完成以上操作，夜间模式和跟随系统深色模式就实现了，小伙伴快去试试看吧。
三、怎么修改、增加CSS样式和深色模式
夜间模式的修改
打开/usr/themes/handsome/assets/css/darkmode.css文件，找到
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
在它上面增加或者修改你需要的样式即可
跟随系统模式的修改（其实就是增加@media (prefers-color-scheme: dark)样式），找到
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
在大括号后面(或者文件最后一个大括号上面)增加或者修改你需要的样式即可，注意每一个样式前面尽量加上body （后面的空格注意，参考我写的样式即可）。
四、怎样修改自动进入夜间模式的时间
打开darkmode.js,找到
if(new Date().getHours() > 22 || new Date().getHours() < 6){
数字22和6就是表示在晚上22点和早上6点之间为夜间模式，修改为你需要的时间数字即可。
版权属于：小杨的生活
本文链接：https://www.akkdiy.cn/archives/357/
转载时须注明出处及本声明
9 comments
已转载并标明出处
已经做成插件
方便大家使用
等有时间发布插件版
转载地址https://www.ddg.ink/54.html
只需要夜间模式可以改吗
昨天下班才回来~今天有空整理发了出来~https://www.ddg.ink/69.html
我已经做成插件等我有时间整理一下发布
可以实现你所说的只夜间模式
理论是可以的
没用啊
说说原因
好了。谢谢提醒~