网页设计：自动适配浏览器深色/浅色模式

要让网页的颜色能够跟随浏览器或操作系统的深色/浅色模式设置自动改变，最佳实践是结合使用 <meta> 标签、CSS 媒体查询和 CSS 变量。

下面是一个清晰、完整的实现方案，分为三个核心步骤。

🚀 核心三步实现方案

1. 声明支持的颜色方案

首先，在 HTML 文件的 <head> 标签内添加一个 <meta> 标签。这相当于告诉浏览器："我的网页支持浅色和深色两种模式，请根据系统设置自动处理。"

html 复制代码

<meta name="color-scheme" content="light dark">

作用：

自动适配：浏览器会根据用户的系统设置，自动为网页应用一套基础的浅色或深色样式。
原生控件适配 ：<input>、<button>、<select> 等浏览器原生控件会自动变为深色或浅色外观，无需额外编写 CSS。

2. 使用 CSS 变量定义主题

这是实现灵活换肤的关键。我们将所有与颜色相关的样式定义为 CSS 变量（也称为自定义属性），并放置在 :root 选择器下。然后，使用 @media (prefers-color-scheme: ...) 媒体查询来为不同模式重写这些变量的值。

css 复制代码

/* 1. 定义默认（浅色）主题的颜色变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0066cc;
}

/* 2. 当系统偏好为深色模式时，重写变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --link-color: #4da6ff;
  }
}

/* 3. 在样式中应用这些变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
}

a {
  color: var(--link-color);
}

优势：

集中管理：所有主题颜色集中在一处定义，修改和维护非常方便。
动态响应：当媒体查询条件满足时，变量值会自动更新，所有引用该变量的样式也会立即生效。

3. 监听系统主题变化（可选但推荐）

prefers-color-scheme 媒体查询在页面首次加载时生效。如果用户在浏览网页时切换了系统主题，页面不会自动更新，除非刷新。为了实现实时响应，我们可以使用 JavaScript 的 matchMedia API 来监听变化。

javascript 复制代码

// 监听系统颜色主题的变化
const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');

colorSchemeQuery.addEventListener('change', (e) => {
  // 当系统主题切换时，这个事件会被触发
  // e.matches 为 true 表示当前是深色模式，false 表示浅色模式
  console.log('系统主题已切换:', e.matches ? '深色' : '浅色');
  // 你可以在这里添加其他需要响应主题变化的逻辑
});

📝 完整代码示例

将以上步骤整合，一个完整的、能自动适配系统主题的 HTML 文件如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 步骤1：声明支持的颜色方案 -->
  <meta name="color-scheme" content="light dark">
  <title>自动适配系统主题</title>
  <style>
    /* 步骤2：使用CSS变量定义主题 */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --link-color: #0066cc;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --link-color: #4da6ff;
      }
    }

    /* 应用变量 */
    body {
      font-family: sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      padding: 20px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    a {
      color: var(--link-color);
    }
  </style>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这个页面的颜色会随着你的系统设置自动改变。</p>
  <a href="#">这是一个链接</a>

  <script>
    // 步骤3：监听系统主题变化
    const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
    colorSchemeQuery.addEventListener('change', (e) => {
      console.log('系统主题已切换为:', e.matches ? '深色模式' : '浅色模式');
    });
  </script>
</body>
</html>

✨ 进阶：如何记住用户的选择？

上面的方案实现了自动适配。但很多网站还提供一个按钮，允许用户手动切换主题。这时，我们需要一个优先级规则：用户手动选择 > 系统默认偏好。

实现思路是：

使用 data-theme 属性（如 <html data-theme="dark">）来标记用户的选择。
在 CSS 中，为 [data-theme="dark"] 定义一套样式，其优先级高于 @media 查询。
使用 JavaScript 监听按钮点击，切换 data-theme 属性，并将用户的选择保存到 localStorage 中。
页面加载时，优先从 localStorage 读取用户的偏好，如果没有，再回退到系统偏好。