网页自动跟随系统暗模式
暗模式已经逐渐成为各个软件和网页的新趋势,过去入股偶想要增加暗模式,你可能需要给用户一个选项来开启暗模式。
现在大多数主流浏览器都支持了对检验颜色主题的支持,让网页可以自动跟随系统UI模式。
介绍下我们今天的主角
prefers-color-scheme
CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
浏览器兼容性
动手测试一下
新建一个简单的html页面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>
接下来在css中加入:
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
切换系统为暗模式。
##