CSS一键设置页面暗黑模式、哀悼模式

发表于 更新于 评论数： 0 阅读次数：
本文字数： 818 阅读时长 ≈ 1 分钟

一键暗黑模式

1
2
3
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。（参考：MDN Web文档）
对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate
invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此
hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。
这个方法的唯一缺点是，它还会反转应用程序中的所有图像。
因此，我们将对所有图像添加相同的规则，以逆转效果。

1
2
3
html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

我们还将向HTML元素添加一个 transition ，以确保过渡不会过于花哨!

1
html {transition: color 300ms, background-color 300ms;}

一键哀悼模式

在遇到大的灾难日时。一般网站会将页面设置成灰白模式，以表示对逝者的悼念。

1
2
3
4
5
6
7
8
html[theme='gray-mode']{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter:progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
	_filter:none;
}