给handsome主题添加一个夜间模式代码

一、 js和css文件上传

代码包里的 js和css文件分开上传到Handsome主题对应目录下,路径如下:

  • /usr/themes/handsome/assets/css/darkmode.css
  • /usr/themes/handsome/assets/js/darkmode.js

二、 Handsome主题需要修改的文件

  1. 打开/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>
  1. 打开/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" />
  1. 打开/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点之间为夜间模式,修改为你需要的时间数字即可。

五、更新

  • 2020-04-02 修复盒子模型下背景不进入夜间模式问题
    该问题自行下载本文最新darkmode.css覆盖即可。
  • 如果你想手动自行修改,请继续往下看:
    打开/usr/themes/handsome/assets/css/darkmode.css文件,找到
  /*夜间模式*/ 

在它下面加入

 html.bg.night {
   background: #151617;
}

继续找到,

/*跟随系统模式*/
@media (prefers-color-scheme: dark) {

在它下面加入,即:

/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
html.bg.night {
   background: #151617;
}

以上内容搬运自陆小北博客

Last modification:April 23rd, 2020 at 04:37 pm
如果觉得我的文章对你有用,请随意赞赏
欢迎在评论区打卡!