一、为什么需要自动切换深色浅色主题

现在很多操作系统和浏览器都支持深色模式，用户可以根据自己的喜好或者环境光线选择使用深色或浅色主题。作为开发者，如果我们的网站或应用能自动适应用户的系统主题设置，用户体验会更好。这就是prefers-color-scheme的用武之地。

prefers-color-scheme是CSS的一个媒体查询特性，可以检测用户是否在系统级别启用了深色模式。这样，我们就能根据用户的偏好自动调整网页的配色方案，而不需要用户手动切换。

比如，你的手机设置了深色模式，晚上浏览网页时，如果网站能自动变成深色背景，是不是感觉更舒服？反之，白天使用浅色模式时，网页也能自动调整，避免刺眼。

二、如何使用prefers-color-scheme

它的基本语法非常简单，就是一个CSS媒体查询：

/* 当用户偏好浅色模式时 */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* 当用户偏好深色模式时 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
}

这样，网页的背景和文字颜色就会根据用户的系统设置自动调整。

结合CSS变量优化代码

如果直接在每个媒体查询里写样式，代码可能会变得冗长。我们可以结合CSS变量（Custom Properties）来优化：

:root {
  --background-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #f0f0f0;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

这样，我们只需要在:root里定义变量，然后在具体的元素中使用这些变量，代码更清晰，也更容易维护。

三、实际应用示例

示例1：完整网页主题切换

假设我们有一个简单的博客页面，包含标题、正文和页脚。我们可以这样实现深色/浅色切换：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的博客</title>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --header-bg: #f8f9fa;
      --footer-bg: #e9ecef;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --header-bg: #1e1e1e;
        --footer-bg: #2d2d2d;
      }
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: var(--header-bg);
      padding: 1rem;
      border-bottom: 1px solid #555;
    }

    main {
      padding: 1rem;
    }

    footer {
      background-color: var(--footer-bg);
      padding: 1rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <header>
    <h1>我的技术博客</h1>
  </header>
  <main>
    <p>欢迎来到我的博客！这里会分享一些前端开发的经验和技巧。</p>
  </main>
  <footer>
    <p>© 2023 我的博客</p>
  </footer>
</body>
</html>

这个示例中，整个页面的背景、文字、页眉和页脚的颜色都会根据系统设置自动调整。

示例2：按钮和交互元素的适配

除了基本的背景和文字，我们还需要考虑按钮、链接等交互元素的样式适配：

:root {
  --button-bg: #007bff;
  --button-text: white;
  --link-color: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --button-bg: #0d6efd;
    --button-text: white;
    --link-color: #4da6ff;
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
}

button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

这样，按钮和链接在深色模式下也会有合适的颜色，确保可读性和美观。

四、技术细节与注意事项

1. 浏览器兼容性

prefers-color-scheme在现代浏览器中支持良好，但在一些旧版本浏览器（如IE）中不支持。如果你的项目需要兼容旧浏览器，可以考虑以下方案：

  • 提供默认的浅色主题：在不支持prefers-color-scheme的浏览器中，回退到浅色模式。
  • 使用JavaScript检测：通过window.matchMedia检测用户偏好，并动态加载对应的CSS。
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-theme');
}

2. 结合用户手动切换

有些用户可能希望手动切换主题，即使系统设置了深色模式。我们可以结合prefers-color-scheme和本地存储（localStorage）来实现：

// 检测用户是否手动切换了主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.body.classList.add(savedTheme + '-theme');
} else {
  // 否则跟随系统设置
  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  if (darkModeMediaQuery.matches) {
    document.body.classList.add('dark-theme');
  }
}

3. 测试深色模式

在开发过程中，如何测试深色模式？

  • 在浏览器中模拟：Chrome DevTools 可以模拟深色模式（在“渲染”选项卡中选择prefers-color-scheme: dark）。
  • 修改系统设置：直接在操作系统（如Windows、macOS）中切换深色/浅色模式。

五、总结

prefers-color-scheme是一个非常实用的CSS特性，可以让我们的网站或应用自动适配用户的系统主题偏好，提升用户体验。结合CSS变量和JavaScript，我们可以实现更灵活的主题切换方案。

在实际项目中，需要注意浏览器兼容性，并提供回退方案。如果用户希望手动切换主题，可以结合localStorage保存用户的选择。

深色模式不仅是潮流，更是对用户友好的设计。如果你的网站还没有适配深色模式，现在就可以动手试试！