之前根据陆小北的文章为Handsome主题添加了夜间模式,现在我修改了一些细节。


因受到恶意攻击,暂停本页面文件下载

修改内容

  • 取消判断Cookie强制根据时间改变夜间模式(按钮切换仍然有效);
  • 添加移动端顶部导航栏切换按钮;
  • 部分细节优化;
  • more……
    移动端顶部切换按钮

下载与上传文件

  • 分别下载darkmode.css与darkmode.js;
    该部分仅登录用户可见
  • 分别上传到Handsome主题对应目录下:
  • /usr/themes/handsome/assets/css/darkmode.css
  • /usr/themes/handsome/assets/js/darkmode.js

修改Handsome主题代码

  • 首先参照作者文章完成操作:陆小北
  • 打开/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){

    数字227表示在晚上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');                     
       }
    }*/

    即可;

  • 宝硕已发布夜间模式插件:Darkmode for handsome
  • 如有问题请评论留言;

感谢

Last modification:June 26th, 2020 at 09:46 am
如果想要赞赏,我绝不阻拦