主题配色怎么跟随系统？
我们经常看到一些应用可以切换不同的配色方案，如浅色模式和深色模式，当然，有的应用还有一个额外的选项“跟随系统”。当用户选择“跟随系统”选项时，应用程序会自动检测用户操作系统的配色方案，并相应地应用相应的配色方案。
那么是怎么做到这一点的？
prefers-color-scheme
这里不得不提到 prefers-color-scheme，prefers-color-scheme 媒体查询是 CSS 中的一种特殊查询，它可以检测用户是否将其系统主题设置为深色或浅色。当操作系统的主题颜色更改时，浏览器会检测到并自动应用相应的 CSS 样式。
例如，如果用户的操作系统主题设置为深色，则浏览器会应用带有 @media (prefers-color-scheme: dark) 媒体查询的 CSS 样式。此时应用程序的背景色、文本颜色、图标颜色等元素会自动切换到更适合深色主题的颜色。同样，如果用户的操作系统主题设置为浅色，则浏览器会应用带有 @media (prefers-color-scheme: light) 媒体查询的 CSS 样式，以适应浅色主题。
鉴于以上的特性，我们能很方便的实现深浅色主题的切换。
下面举一个简单的例子，看看深浅主题的怎么实现的。
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<p>Welcome to my website!</p>
</main>
</body>
:root {
--bg-color: #fff;
--text-color: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #333;
--text-color: #fff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
header {
background-color: var(--bg-color);
color: var(--text-color);
}
main {
background-color: var(--text-color);
color: var(--bg-color);
}
当用户将操作系统主题设置为深色时，浏览器会检测到 prefers-color-scheme 媒体查询并自动将 --bg-color 和 --text-color 的值设置为对应的深色主题的值。相反，如果用户将操作系统主题设置为浅色，则浏览器会自动将这些变量设置为浅色主题的值。
运行效果如下所示，主动切换系统主题看看效果吧。
See the Pen
Untitled by leevare (@leevare-the-reactor)
on CodePen.
- 本博客所有文章除特别声明外，均可转载和分享，转载请注明出处！
- 本文地址：https://www.leevii.com/?p=3334