一键切换夜间模式
本站目前已经支持点击右上角的图标,一键切换日/夜间模式了哦
有同玩Typecho的小伙伴问源码在哪,今天就来分享一下


下载上面的文件,解压后将CSS和JS分开上传对应目录下:

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

然后根据作者的指导,添加相应代码到主题文件里就可以啦

但查理在使用后发现,有部分情况会出BUG,比如盒子模型下会有部分区域不切换夜间模式首页图片过亮等问题。
这里分享一下优化新增的代码,大家根据自己需要选择性食用:

将这部分添加到darkmode.css文件的/*跟随系统模式*/上面:

/*自定义优化部分*/
.night #bubble{
    display: none;
}
.night .wrapper-md{
    background: #151617;
}
.night .bg-danger .nav>li>a:focus, .night .bg-danger .nav>li>a:hover{
    background-color: #1D1F20 !important;
}
.night .bg-danger .nav .open>a{
    background-color: #1D1F20 !important;
}
.night .form-control{
    background-color: #111 !important;
}
.night .OwO .OwO-logo{
    background-color: #111 !important;
}
.night .panel-picture{
    opacity: .5 !important;
}
.night .item-thumb{
    opacity: .5 !important;    
}
.night .alert-warning{
    color: #ffffff;
    background-color: #151617;
    border-color: #1d1f20;
}
.night .tip.inlineBlock{
    opacity: 0.5 !important;
    color: #000;
}

将这部分添加到darkmode.css文件最后的}之前:

/*自定义优化部分*/
body  #bubble{
    display: none;
}
body .wrapper-md{
    background: #151617;
}
body .bg-danger .nav>li>a:focus, body .bg-danger .nav>li>a:hover{
    background-color: #1D1F20 !important;
}
body .bg-danger .nav .open>a{
    background-color: #1D1F20 !important;
}
body .form-control{
    background-color: #111 !important;
}
body .OwO .OwO-logo{
    background-color: #111 !important;
}
body .panel-picture{
    opacity: .5 !important;
}
body .item-thumb{
    opacity: .5 !important;    
}
body .alert-warning{
    color: #ffffff;
    background-color: #151617;
    border-color: #1d1f20;
}
body .tip.inlineBlock{
    opacity: 0.5 !important;
    color: #000;
}

最后修改:2022 年 05 月 16 日
喵喵喵~我装可爱你会打赏嘛?