让网页自动跟随系统暗模式暗模式已经逐渐成为各个软件和网页的新趋势，过去如果想要增加暗模式，你可能需要给用户一个选项来开启

暗模式已经逐渐成为各个软件和网页的新趋势，过去如果想要增加暗模式，你可能需要给用户一个选项来开启暗模式。

现在大多数主流浏览器都支持了对检验颜色主题的支持，让网页可以自动跟随系统UI模式。

介绍下我们今天的主角

prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

浏览器兼容性

测试一下

新建一个简单的网页test.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>暗模式</title>
	<style>
		body {
			background: white;
			color: black;
		}
	</style>
</head>
<body>
	<h1>测试跟随暗模式</h1>
	<p>哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈</p>
</body>
</html>

这是不加媒体查询prefers-color-scheme的默认样式

接下来在css中加入：

@media (prefers-color-scheme: dark) {
    body {
    	background: black;
    	color: white;
    }
}

刷新下网页

当当当当~

更多用法可以到这里查看。