昨晚在网上逛时无意发现了轻松让网站实现暗黑模式的小工具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;
}
大家如有兴趣可以结合自己的主题继续完善和扩展!
大神,我的网站只能把背景弄黑,其他的还是白色的,就像是浮起来了。加了默认选项就是这样的。
回复 佛系软件: CSS加个z-index试一下。。。
回复 老王: 我用你提供的css可以用了,但是怎么把🌓加上呢?而且蓝色的字体变成橙色了,可以只变黑白两色,其他的不变吗。
回复 老王: 而且导航栏不起作用,背景黑色太黑了。
回复 佛系软件: 因为主题不一样,我提供的只作参考,根据自己的主题调整下,右键“检查元素”里面可以查找并修改到自己满意,再把相关样式Copy到你的主题CSS文件中即可。🌓正常是在的,可能是样式问题被遮盖住了。。。
回复 老王: 样式里面没有🌓啊,扩展加了就不起作用。背景色和文字的颜色在哪里修改可以告知吗。谢谢。
黑色圆形按钮被搜索图片挡住了,按不了。。。
回复 阿和: 功能都已经被我撤了,只是这篇文章那里有那个,我还没弄明白是什么问题 :lol:
试过几个插件就是不兼容 只好作罢
回复 灰常记忆: 我不喜欢插件,而且这个玩意儿除非主题集成了,不然兼容性好难,每个主题标签和配色可能不一样 :biggrin:
可以,稍微调亮了点..
回复 Mr.Chou: 能看清就行,准备玩几天就不玩了 :wl:
嘿.确实很方便;不过一些细节上还需完善,.我在手机端木有发现那个按钮;
电脑端启用后,输评论这有点黑~评论若隐若现的``
回复 Mr.Chou: 现在好多手机自带这个功能,所以手机端把它隐藏了! :biggrin:
代码简单的代价就是好多需要自己去完善,没有教程只有自己慢慢折腾吧! :cry:
图片像底片的问题还是去扒你的代码参考才解决的。 :lol:
回复 Lvtu: 哈哈,折腾无止境改到自己满意为止。
回复 Mr.Chou: :razz: 现在框内字体颜色正常了吧