前言:目前,主流系统无论是Windows、MacOS、各大手机厂商系统都支持主题全局深色模式了,所以萌生了这个想法,将博客也配备全局深色模式。
首先,选择适合自己主题的方案
目前,比较主流的方案有两种:
- prefers-color-scheme 媒体查询
- 给body加class
基于我的matery主题,我选择了第二种,主要思想就是加上一个”body.dark”来限制深色模式下的样式。
制作深色模式按钮
在主题的layout.ejs
文件中找到body标签的开始标签在后面加上这些js和html代码,这里我放的位置为:/layout/layout.ejs
<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>
按钮的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";
}
按钮的js代码
放在独立的js文件里即可,这里我放在/souce/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;
}
}
最后,加上覆盖样式
原理:就是在你觉得深色模式下需要变色的css 选择器前面加上一个body.dark
选择器
需要改变:
- 字体颜色变灰/黑色 color: rgba(255, 255, 255, 0.75);
- 背景颜色变灰/黑色 background-color: #282c34;
- 图片加一个暗色遮罩 filter: brightness(.7);
注意:以下css覆盖样式代码是根据我自己喜好修改的,若需要可直接复制粘贴,大体上原理就是这样,你也可以根据自己喜好改变需要变色的地方和颜色。
/* 深色模式设置 */
/* 字体颜色变灰白色 */
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);
}
本文参考了以下两篇文章:如果你使用的是和我一样的matery主题,则可以直接复制上面代码,再做酌情修改样式即可,其他主题的也一样,逻辑都是一样的。