html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
img {
filter: invert(1) hue-rotate(180deg);
}
}
html {
transition: color 300ms, background-color 300ms;
}
- 整个网站反转颜色
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
对于暗黑模式,将使用两个 filter :invert 和 hue-rotate
invert:反转配色。黑色变为白色,白色变为黑色,所有颜色都是如此
hue-rotate:帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度,我们确保应用程序的颜色主题不会改变,而只是减弱其颜色。
- 再次反转图片的颜色
这个方法有个问题,它还会反转图像的颜色。所以,还要对所有图像添加相同的规则,以逆转效果。
html[theme='dark-mode'] img{
filter: invert(1) hue-rotate(180deg);
}
- 还可以添加过渡效果
html {
transition: color 300ms, background-color 300ms;
}
最后,只需给你的 html
添加属性 theme
,并赋值 dark-mode
就能应用这个样式了。而要实现切换效果只需 toggle 这个属性的值。当然你也可以用到任意的元素上,不一定是 html,这只是一个 css 规则。