Darkmode.Js – 网站支持炫酷暗黑模式/夜间模式

https://music.163.com/#/song?id=5184139

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

《Darkmode.Js – 网站支持炫酷暗黑模式/夜间模式》

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

介绍

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

安装方法

Code Source
<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>之前都可以。

扩展

Code Source
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();

《Darkmode.Js – 网站支持炫酷暗黑模式/夜间模式》
弄到这里基本就可以了,如果加了上述代码点击没有反应。可能是有些主题代码层叠顺序导致的,因为我也遇到过,在CSS文件中重新定义一个z-index就可以了。

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

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

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

本站所用样式可供参考:

Code Source
.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;
}

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

老王, 阿和, 灰常记忆, Mr.Chou等人对本文发表了10条热情洋溢的讲话。
  1. 阿和说道: 7来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

    黑色圆形按钮被搜索图片挡住了,按不了。。。

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

      @阿和: 功能都已经被我撤了,只是这篇文章那里有那个,我还没弄明白是什么问题 :lol:

  2. 灰常记忆说道: 4来自天朝的朋友 Chrome | 80.0.3987.132 vivo X20A) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36

    试过几个插件就是不兼容 只好作罢

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

      @灰常记忆: 我不喜欢插件,而且这个玩意儿除非主题集成了,不然兼容性好难,每个主题标签和配色可能不一样 :biggrin:

  3. Mr.Chou说道: 6来自天朝的朋友 Chrome | 79.0.3945.130 Windows 10

    可以,稍微调亮了点..

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

      @Mr.Chou: 能看清就行,准备玩几天就不玩了 :wl:

  4. Mr.Chou说道: 6来自天朝的朋友 Chrome | 79.0.3945.130 Windows 10

    嘿.确实很方便;不过一些细节上还需完善,.我在手机端木有发现那个按钮;
    电脑端启用后,输评论这有点黑~评论若隐若现的``

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

      @Mr.Chou: 现在好多手机自带这个功能,所以手机端把它隐藏了! :biggrin:
      代码简单的代价就是好多需要自己去完善,没有教程只有自己慢慢折腾吧! :cry:
      图片像底片的问题还是去扒你的代码参考才解决的。 :lol:

      1. Mr.Chou说道: 6来自天朝的朋友 Firefox | 33.0 Mac OS X 10_10

        @Lvtu: 哈哈,折腾无止境改到自己满意为止。

        1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

          @Mr.Chou: :razz: 现在框内字体颜色正常了吧

发表评论

电子邮件地址不会被公开。 必填项已用*标注