之前根据陆小北的文章为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){

  数字22和7表示在晚上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；
• 如有问题请评论留言；

感谢

• 感谢原作者 陆小北：typecho博客程序Handsome主题实现一键切换夜间模式，支持指定时间进入夜间模式和跟随系统深色模式；
• 感谢 宝硕：宝硕小站提供的修改代码；