原生HTML+CSS适配深色模式/暗色模式

原生HTML+CSS适配深色模式/暗色模式
在页面head中添加

1
<meta name="color-scheme" content="light dark">

如果需要特殊设置，则增加如下CSS

1
2
3
4
5
6
7
8
9
10
11
12
:root {
	color-scheme: light dark;
	background: white;
	color: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		background: darkblue;
		color: darkred;
	}
}

浅色模式效果：

深色模式效果：

如需自定义样式，则对元素声明class或id，并分别在上述CSS样式中针对浅色和深色单独设置即可。