最近看到很多 APP 都有了深色模式,可以随着系统进入深色模式而进入深色模式,后来发现原来网页也可以实现这种效果,就折腾了一个下午帮这个网站弄了一个深色模式。
要实现颜色随系统设置自动变化,CSS 提供了一种简洁的方法。在 CSS 中,@media 规则用于进行媒体查询,它允许我们根据设备的特性和参数来应用不同的样式。而 @media 下的 prefers-color-scheme 能够检测用户系统的主题色偏好。prefers-color-scheme 支持三种值:no-preference(无偏好)、light(浅色模式)、dark(深色模式)。
Note根据 MDN 文档的解释,
no-preference表示浏览器的宿主系统不支持主题色设置,或者支持但默认未设置或用户未指定偏好。
先创建一个测试网页:

浅色模式示例
其中的 CSS 部分是这样的
.card{
top: 40%;
margin: auto;
box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6);
padding: 8px 10px 6px;
background: rgba(255,255,255,.596078431372549);
border-radius: 25px;
position: relative;
text-align: center;
}
p{
color: #000;
font-size: 2em;
}
.bg{
background-image: url(https://cdn.vinking.top/bg.jpg);
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-size: cover;
opacity: .4;
filter: blur(8px);
}
在深色模式下,我们想要将文字颜色改为白色,背景框设为黑色透明,同时更换背景图片为暗色系,并适提高其透明度。为了实现这些样式的变化,可以使用 @media (prefers-color-scheme: dark) 媒体查询,结合 :root 伪类选择器,将 CSS 代码修改如下:
CodeBlock Loading...
当用户切换到系统的深色模式时,页面的效果也会自动更新。

深色模式示例
Note最后需要注意一下,有一些浏览器是不支持
prefers-color-scheme的,具体支持哪一些浏览器可以在 这里 看到