本文共 508 字，大约阅读时间需要 1 分钟。

prefers-color-scheme 可以检测到用户是否已请求操作系统使用浅色或深色主题，其有三个可选的选项：

• no-preference：未能检测到用户的选择
• light：用户倾向于使用浅色的主题
• dark：用户倾向于使用深色的主题，例如用户开启了 Mac 中的深色模式

所以，在这里我们可以使用 prefers-color-scheme: dark 来检测用户是否开启了 Dark Mode。

使用：

/* 操作系统及浏览器未支持或用户未开启 Dark Mode */body {    background-color: white;    color: black;}@media (prefers-color-scheme: dark) {    /* 操作系统及浏览器支持且用户开启了 Dark Mode */    body {        background-color: black;        color: white;    }}

这样，用户在平时看到的是白色背景，而开启了深色模式后，页面就会自动变为黑色背景。当然，夜间模式的适配需要做的工作还很多，需要你慢慢调整各元素的颜色等。

转载地址：https://blog.csdn.net/zwhy123/article/details/117923568 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！