网页自动跟随系统暗模式

Baomer's Blog

2020-09-09

阅读量: 0

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

现在大多数主流浏览器都支持了对检验颜色主题的支持，让网页可以自动跟随系统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;
    }
}

切换系统为暗模式。