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

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

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

此时已经实现了最基础的浅色、深色模式适配，浅色模式下为白底黑字，深色模式下为黑底白字。

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

:root {
	color-scheme: light dark;
	background: white;
	color: black;
}

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

浅色模式效果：

深色模式效果：

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