如何使用 CSS 的 prefers-color-scheme 媒体特性实现深色模式 (Dark Mode)？

推荐答案

-- -------------------- ---- -------
-- -------- --
---- -
  ----------------- ------
  ------ ------
-

-- ------ --
------ ---------------------- ----- -
  ---- -
    ----------------- ------
    ------ ------
  -
-


-- ----------- --

- -
  ------ -----
-

------ ---------------------- ----- -
  - -
    ------ ----------
  -
-


-- --------- --
----- -
   ------- ------------- ---------- --
-

------ ---------------------- ----- -
  ----- -
    ------- ------------- -------- --
  -
-

本题详细解读

prefers-color-scheme 是一个 CSS 媒体特性，允许网站根据用户在操作系统或浏览器中设置的颜色方案偏好来调整其样式。它主要用于实现浅色模式（Light Mode）和深色模式（Dark Mode）的切换。

基本语法：

@media (prefers-color-scheme: value) {
  /* 针对指定颜色方案的样式 */
}

其中，value 可以是以下两个值之一：

• light: 表示用户偏好浅色模式。
• dark: 表示用户偏好深色模式。

实现深色模式的步骤：

1. 定义默认浅色模式样式： 首先，你需要定义网站的默认样式，即浅色模式下的样式。这通常是背景色较浅，文字颜色较深的样式。

   body {
     background-color: white;
     color: black;
   }

2. 使用 @media (prefers-color-scheme: dark) 定义深色模式样式： 在 prefers-color-scheme 媒体查询中，针对 dark 值，覆盖需要改变的样式。例如，将背景色改为深色，文字颜色改为浅色。

   @media (prefers-color-scheme: dark) {
     body {
       background-color: black;
       color: white;
     }
   }

3. 针对其他元素调整： 你需要检查网站的所有元素，并根据深色模式下的视觉效果，调整它们的颜色。 比如链接颜色，图片颜色等等，可以使用同样的 @media (prefers-color-scheme: dark) 进行调整，也可以使用css变量。

其他注意事项：

• 兼容性： prefers-color-scheme 媒体特性在主流浏览器中都有良好的支持，但仍然需要注意兼容性问题，针对不支持的浏览器可能需要使用js来做兼容。
• 颜色对比度： 确保深色模式下的颜色对比度符合可访问性标准（WCAG），确保文本和背景之间有足够的对比度，方便用户阅读。
• CSS变量(Custom Properties):可以使用CSS变量来实现更方便的颜色切换，方便管理和复用。
• 图片和图标： 针对深色模式，你可能需要使用不同的图片或图标，或者使用CSS滤镜来调整颜色。
• **测试：**在不同的操作系统和浏览器中测试你的深色模式实现，确保在不同环境下都有良好的显示效果。

示例：使用 CSS 变量

-- -------------------- ---- -------
-- -------- --
----- -
  ------------------- ------
  ------------- ------
  ------------- -----
-

---- -
  ----------------- ------------------------
  ------ ------------------
-

- -
  ------ ------------------
-

-- ---------- --
------ ---------------------- ----- -
  ----- -
    ------------------- ------
    ------------- ------
    ------------- ----------
  -
-

使用 CSS 变量可以更方便地管理和维护颜色值，并允许更灵活的样式调整。