效果图预览：
一，制作按钮
找到hexo的themes\matery\layout文件夹下面的layout.ejs,在</body>前面复制粘贴代码
如图：
代码
<script>
if (localStorage.getItem('dark') === '1') {
document.body.classList.add('dark');
}
else if (new Date().getHours() >= 22 || new Date().getHours() < 7) {
document.body.classList.add('dark');
}
else if (matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
<a onclick="switchNightMode()" id="sma">
<i class="fa fa-moon-o" id="nightMode" aria-hidden="true"></i>
</a>二，配置按钮样式
1.js配置
打开\themes\matery\source\js文件夹中的matery.js文件，然后在末尾复制以下代码：
// 深色模式设置
function switchNightMode() {
var body = document.body;
if(body.classList.contains('dark')){
document.body.classList.remove('dark');
localStorage.setItem('dark','0');
$('#nightMode').removeClass("fa-lightbulb-o").addClass("fa-moon-o");
return;
} else {
document.body.classList.add('dark');
localStorage.setItem('dark','1');
$('#nightMode').removeClass("fa-moon-o").addClass("fa-lightbulb-o");
return;
}
}2.css配置
打开\themes\matery\source\css文件夹下面的matery.css文件，复制粘贴以下代码：
代码
/* 深色模式按钮设置 */
#sma {
background: #000;
width: 38px;
height: 38px;
display: block;
position: fixed;
border-radius: 50%;
right: 15px;
bottom: 170px;
padding-top: 15px;
margin-bottom: 0;
z-index: 998;
cursor: pointer;
}
#sma .fa-moon-o {
position: absolute;
right: 8px;
bottom: 8px;
font-size: 1.48rem!important;
}
#sma .fa-lightbulb-o {
position: absolute;
right: 13px;
bottom: 8px;
font-size: 1.5rem!important;
}
.fa-moon-o:before {
content: "\f186";
}
.fa-comments:before {
content: "\f086";
}和这个代码：
代码
/* 深色模式设置 */
/* 字体颜色变灰白色 */
body.dark .fas,
body.dark .title,
body.dark .row .text,
body.dark article .article-content .summary,
body.dark .card .card-image .card-title,
body.dark .fa-moon-o:before,
body.dark .fa-lightbulb-o:before,
body.dark article .article-tags .chip,
body.dark .chip-container .tag-title,
body.dark div.jqcloud a,
body.dark .friends-container .tag-title,
body.dark .frind-ship .title h1,
body.dark .card .card-content p,
body.dark .v[data-class=v] .vcount,
body.dark .v[data-class=v] .vcount .vnum,
body.dark pre code,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark li,
body.dark p,
body.dark header .side-nav .mobile-head .logo-name,
body.dark header .side-nav .mobile-head .logo-desc,
body.dark header .side-nav .menu-list a,
body.dark .bg-cover .post-title,
body.dark a
{
color: rgba(255, 255, 255, 0.6);
}
/* 背景颜色变灰色 */
body.dark .card,
body.dark .block-with-text:after
{
background-color: #282c34;
}
/* 背景颜色变黑色 */
body.dark,
body.dark .v[data-class=v] .vcount,
body.dark #rewardModal .modal-content,
body.dark .modal,
body.dark header .side-nav,
body.dark header .side-nav .menu-list .m-nav-show
{
background-color: #12121c;
}
/* 改变透明度 */
body.dark .aplayer{background: #2f3742!important;}
body.dark img, body.dark strong {
filter: brightness(.7);
}三，小bug说明
实际使用过程中会遇到bug，如图是这样的：
可以看到那个按钮会变得很奇怪。
| 正常的暗色按钮 | 不正常的 |
|---|---|
 |
 |
不知道是什么原因，我还准备搞一个动画，可是水平不行，有些语言不行，懂的可以看看我下面看的链接，就这样吧。
