网页如何跟随系统切换深色模式

摘要：

这篇文章介绍了如何使用 CSS 实现网页深色模式，通过 @media (prefers-color-scheme: dark) 配合 :root 选择器可以根据用户系统主题色的设置来改变网页的颜色和背景图片。需要注意的是，有些浏览器不支持 prefers-color-scheme 特性。

最近看到很多 APP 都有了深色模式，可以随着系统进入深色模式而进入深色模式，后来发现原来网页也可以实现这种效果，就折腾了一个下午帮这个网站弄了一个深色模式。

要实现颜色随系统设置自动变化，CSS 提供了一种简洁的方法。在 CSS 中，@media 规则用于进行媒体查询，它允许我们根据设备的特性和参数来应用不同的样式。而 @media 下的 prefers-color-scheme 能够检测用户系统的主题色偏好。prefers-color-scheme 支持三种值：no-preference（无偏好）、light（浅色模式）、dark（深色模式）。

Note
根据 MDN 文档的解释，no-preference 表示浏览器的宿主系统不支持主题色设置，或者支持但默认未设置或用户未指定偏好。

先创建一个测试网页:

其中的 CSS 部分是这样的

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 的，具体支持哪一些浏览器可以在这里看到

.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); }

/*浅色模式*/ :root { --p_color:#000; --bg_img:url(https://cdn.vinking.top/bg.jpg); --card_bg:rgba(255,255,255,.596078431372549); --bg_op:.4; } /*深色模式*/ @media (prefers-color-scheme: dark){ :root { --p_color:#fff; --bg_img:url(https://cdn.vinking.top/iVQRxPEjsx1xw7d.jpg); --card_bg:rgba(0,0,0,.4); --bg_op:.9; } } .card{ top: 40%; margin: auto; box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6); padding: 8px 10px 6px; background: var(--card_bg); border-radius: 25px; position: relative; text-align: center; } p{ color: var(--p_color); font-size: 2em; } .bg{ background-image: var(--bg_img); position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background-size: cover; opacity: var(--bg_op); filter: blur(8px); }