使用Darkmode.js为网站添加深色模式
Darkmode.js 是由Sandoche开发的开源代码库,目前项目托管于Github;用户可以通过轻量级的代码实现网站添加深色模式;除了默认切换方式,代码还提供了较为全面的自定义选项,用户可以根据自己需求进行切换。
简单调用
将代码直接复制粘贴到网站页面的头部或者尾部即可;
<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
通过默认方式调用,会直接在网站右下角生成圆形的切换按钮;点击按钮即可切换深色模式;另外,通过测试,默认代码目前似乎还存在一些小问题,比如,切换后无法记忆Cookies,导致切换页面会还原。使用自定义选项可以解决这个问题;
自定义选项
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,
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;
}
本文由 KAYLOG 创作,如非特别声明,本站图片及内容均为原创或翻译;
并遵循 CC BY-NC-SA 4.0协议 许可。转载前请务必署名。
.LUD:Jul 30th , 2020 at 02:02 pm
- 上一篇: The Big Bang Theory Season 5 Ep#24
- 下一篇: Evolve
总算找到这个神器,终于不用自己改CSS了!前来留名
很有用!