🌓 使用 Darkmode.js 为网站添加深色模式

Darkmode.js 是由 Sandoche 开发的开源代码库,目前项目托管于 Github;用户可以通过轻量级的代码实现网站添加深色模式;除了默认切换方式,代码还提供了较为全面的自定义选项,用户可以根据自己需求进行切换。

项目地址:https://darkmodejs.learn.uno

Demo 演示:

https://savalone.com

https://darkmodejs.learn.uno

https://tradivegan.com

https://what.toeat.in

https://www.kanbanote.com

https://www.sandoche.com


简单调用

将代码直接复制粘贴到网站页面的头部或者尾部,就会在网页的右下角出现一个按钮,点击即可切换白天 / 夜晚模式。

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

如果觉得加载慢,可以自己下载替换;或使用其他公共库 CDN 加速服务;

七牛云: https://cdn.staticfile.org/Darkmode.js/1.4.0/darkmode-js.min.js
cloudflare: https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.4.0/darkmode-js.min.js


自定义选项

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


方法

如果不想在页面中显示切换按钮,可以通过 toggle() 方法进行屏蔽,并通过 isActivated() 方法检测深色模式是否激活;如果已激活默认会返回 True。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // will return true


自定义样式

1、当深色模式被激活时,代码会在 <body> 标签中添加 darkmode--activated 的样式类,你可以通过它来覆盖样式,添加自定义的样式;

2、可以通过添加 darkmode-ignore 类来屏蔽你不想添加深色模式的地方;或者直接为页面元素添加 isolation:isolate; 类来屏蔽深色模式;

3、可以通过添加 mix-blend-mode: difference; 样式恢复暗黑模式。

CSS:
.darkmode--activated p, .darkmode--activated li {
    color: #000;
}
.button {
    isolation: isolate;
}
.darkmode--activated .logo {
    mix-blend-mode: difference;
}
HTML:
<span class="darkmode-ignore">


Debug

如果发现页面中元素没有生效,原因可能是页面元素层级关系覆盖导致的;可以通过添加下面的代码解决;不过需要注意的是,这个代码将会覆盖更多元素,比如图片。

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

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫,即可进行扫码打赏哦


「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」
  • 4

  • 评论