共计 1279 个字符，预计需要花费 4 分钟才能阅读完成。
前言
我并非一个专业的前端开发者，起码我是这样认为的。
缘起
在某天的接近傍晚的一个无聊时刻，我用手机打开了网站。本来正常是日光模式在浏览着，突然就变成暗黑模式。我就纳闷了，怎么突然就变成暗黑模式了。莫不是撞鬼了？
具体效果如下图所示，网站样式随系统模式进行切换。
但是转念一想，作为坚定的唯物主义者，自然是不信是有鬼的。于是乎我就请教了前端领域的高手朋友——江湖人称“导师”！
高手不愧是高手，一眼就看出来。经过他不厌其烦的给我讲解科普、分析代码，发现其实是主题里面用到了prefers-color-scheme样式。
什么是prefers-color-scheme？
根据业内权威文档prefers-color-scheme – CSS：层叠样式表 | MDN、CSS @media 规则
的解释，可以得知prefers-color-scheme这个媒体特性在Media Queries 第五版中被添加。主要用于检测用户系统是否设置为亮色（浅色）模式或者暗色（深色）模式。有三个值：no-preference、light、dark。
| 属性 | 含义 |
|---|---|
| no-preference | 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。 |
| light | 表示用户已告知系统使用的是浅色主题的界面。 |
| dark | 表示用户已告知系统使用的是深色主题的界面。 |
该怎么使用
了解了那么多，但如何实现开头gif图上的那种效果？
其实很简单，只需要使用prefers-color-scheme分别为亮色和浅色分别设置样式即可了。直接上代码！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>prefers-color-scheme 测试使用</title>
<style>
/* 深色时的样式 */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* 浅色时的样式 */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
</style>
</head>
<body class="body">
我是body
</body>
</html>css内设置@media (prefers-color-scheme: dark)为深色时，就把body背景颜色改黑、文字变白； @media (prefers-color-scheme: light)为浅色时，就把body背景颜色改白、文字变黑。
如果浏览器兼容该特性，那么修改系统显示模式的时候就会生效了，根据上面权威文档，可以看到相关浏览器的兼容性，浏览器兼容性。
后记
当然了，上面只是简单示范使用。实际开发过程中，逻辑可能远比这个复杂。但是万变不离其宗的是肯定会使用到prefers-color-scheme。
