使用 Darkmode.js 为网站添加深色模式
使用 Darkmode.js 为网站添加深色模式
Savalone
发布于 2020-03-09 14:32:23
发布于 2020-03-09 14:32:23
Darkmode.js 是由 Sandoche 开发的开源代码库，目前项目托管于 Github；用户可以通过轻量级的代码实现网站添加深色模式；除了默认切换方式，代码还提供了较为全面的自定义选项，用户可以根据自己需求进行切换。
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;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年03月06日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。