昨晚在网上逛时无意发现了轻松让网站实现暗黑模式的小工具Darkmode.js, Darkmode.js是一个开源JavaScript项目，只一段代码就能快速让你的网站支持深色模式，非常強大！而且轻量易使用。

安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式。

介绍

官网：https://darkmodejs.learn.uno/
Github：https://github.com/sandoche/Darkmode.js

安装方法

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
new Darkmode().showWidget();
</script>

这个代码很多人都会安装了。在footer.php文件中随便找个合适的位置放入就可以了, 或者是模板文件</body>之前都可以。

扩展

var options = {
new Darkmode({
bottom: '265px', // default: '32px'
right: '30px', // default: '32px'
left: 'unset', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#ffffff', // default: '#fff'
backgroundColor: 'unset',  // default: '#fff'
buttonColorDark: '#848484',  // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
})
.showWidget();

弄到这里基本就可以了，如果加了上述代码点击没有反应。可能是有些主题代码层叠顺序导致的，因为我也遇到过，在CSS文件中重新定义一个z-index就可以了。

.darkmode-layer, .darkmode-toggle {
z-index: 500;
}

现在基本就可以实现，如果不喜欢那个按钮显示，也可以把它隐藏。
关于这种方式唯一有点不满意的就是暗黑模式下照片会变成像相机底片那样，有些照片会看着不好看。因此要避免这种情况可以根据自己的主题试试如下方法：

.darkmode--activated img {
isolation: isolate;
mix-blend-mode: difference;
}
/* elements that create their a stacking context are automatically isolated */
.footer {
z-index: 1;
}

本站所用样式可供参考：

.darkmode-layer, .darkmode-toggle {
z-index: 500;
}

.darkmode--activated .photo-background {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated img {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated .photo-background {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated #comment {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
@media screen and (max-width:760px) {
.darkmode-layer, .darkmode-toggle {
display:none;
}
}
.darkmode--activated .form-control {
color:#ffffff
}

.darkmode-toggle{
border-radius:0;
width: 50px;
height: 50px;
background: #848484;
box-shadow: 0 0 10px rgba(0,0,0,.05);
white-space: nowrap;
-webkit-transition: all .3s;
transition: all .3s;
outline:none;
}

大家如有兴趣可以结合自己的主题继续完善和扩展！