请注意,本文编写于 1668 天前,最后修改于 881 天前,其中某些信息可能已经过时。
本站目前已经支持点击右上角的图标,一键切换日/夜间模式了哦
有同玩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;
}