4个给网站添加暗黑模式的简单方法
1、CSS 滤镜反转颜色¶
/* 代码实现全网站暗黑模式 */
@media (prefers-color-scheme: dark) {
html {
background-color: #fff !important;
color: #000 !important;
}
html {
/* 反转180度颜色 */
filter: invert(1) hue-rotate(180deg) !important;
}
/* 图片、视频等元素不需要处理，可继续添加可以不用处理的元素 */
img,
video,
iframe {
/* 再反转180度变成原来颜色 */
filter: invert(1) hue-rotate(180deg) !important;
}
}
2、JS 库添加蒙板¶
<script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.5.7/darkmode-js.min.js"></script>
<script>
// 监听系统暗黑模式变化
let darkmode = new Darkmode()
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (event) => {
if (event.matches) {
// 切换暗黑模式
if (!darkmode.isActivated()) {
darkmode.toggle()
}
} else {
// 切换亮色模式
if (darkmode.isActivated()) {
darkmode.toggle()
}
}
})
</script>
3、CSS 伪类:not() 选择器¶
/* 代码实现全网站暗黑模式 */
@media (prefers-color-scheme: dark) {
/* 排除的 a 和 code 元素 */
html *:not(a, code *) {
background-color: #000000 !important;
color: #ffffff !important;
}
/* a元素单独设置颜色 */
a {
color: #4caf50 !important;
}
}
4、CSS media 媒体查询¶
HTML media 属性定义和用法
media 属性规定目标资源针对什么媒体/设备进行了优化。
media 属性指定了被链接文档将显示在什么设备上。
该属性主要与 CSS 样式表一起使用，为不同的媒体类型指定不同的样式。
media 属性可以接受多个值。