给你的网站添加暗黑模式
Sonder
2020-04-22
1423字
4分钟
浏览 (4.1k)
1. Darkmode.Js
前言
Darkmode.Js 是一款开源项目，非常易于使用，只需一段代码就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式
安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式，让你的网站跟上 UI 界的潮流。
这是一个不需要任何技术，很容易使用的开源项目
代码
看到这个代码估计很多人都会安装了。
随便找个 footer.php 文件放到合适的位置就可以了
并且数据保存于本地浏览器，用户下次访问的时候依旧会根据上一次的设置显示。
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
new Darkmode().showWidget();
</script>默认选项
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: ''
}
const darkmode = new Darkmode(options);
darkmode.showWidget();官网
2. 给网页适配黑暗模式(不使用darkmode.js)
Html 5适配
CSS 适配
通过媒体查询@media(prefers-color-scheme: dark)来适配 prefers-color-scheme 的值有两个 dark 和 light 。
body {
background: #ffffff;
color: #333;
}
@media (prefers-color-scheme: dark) {
body {
background: #000000;
color: #eee;
}
}Javascript 适配
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
//你要写的黑暗模式下的动作
}