最近看到几个友链都弄了跟随系统暗色的夜间模式，然后我也去捣鼓了一下，从友人陆小北哪里学习到了如何配置，甚是感谢

注意:只对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 国际许可协议进行许可，请在转载时注明出处及本声明！