color-scheme：轻松实现亮暗主题切换的完整指南

随着浏览器对暗黑模式的支持变得越来越广泛，网页开发中也逐渐成为了一项重要的考虑因素。在现代网站设计中，用户体验的提升不仅仅体现在功能和内容的丰富性上，界面的视觉舒适度同样不可忽视。暗黑模式作为一种减轻视觉疲劳、提升可读性的显示方式，正受到越来越多用户的青睐。因此，在日常的网页开发中，我们需要积极适应这一趋势，确保网站能够灵活地匹配和支持不同的显示模式，以提供更为优质的用户体验。接下来，让我们一起探讨如何实现不同模式的适配！

color-scheme：向浏览器传达你的偏好#

color-scheme是一个强大的 CSS 属性，它能够指示浏览器你的网页支持哪些配色方案。其取值包括：

normal：表示元素未指定任何特定配色方案，应使用浏览器的默认配色方案呈现。
light：表示元素可以使用操作系统的亮色配色方案渲染。
dark：表示元素可以使用操作系统的深色配色方案渲染。
only：禁止用户代理覆盖元素的颜色方案。

默认情况下，即使系统切换不同模式，页面配色也不会自动改变。

系统切换模式时页面无变化

要同时支持明亮和暗黑两种模式，需要添加如下 CSS 代码：

:root {
  color-scheme: light dark;
}

添加此代码后，页面将随系统模式切换而变化：

页面随系统模式切换而变化

prefers-color-scheme：响应系统设置#

仅仅通过color-scheme在切换模式时自动调整默认样式是不够的。在实际开发中，我们还需要使用prefers-color-scheme媒体查询来匹配不同的自定义样式。例如：

/* 默认亮色主题 */
body {
  background-color: #fcecec;
  color: #333;
}

/* 暗色主题 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #520707;
    color: #fff;
  }
}

注意，如果不做暗色主题的样式适配，默认主题样式将覆盖亮色和暗色的主题，导致切换模式时样式不会变化。

动态主题切换：借助 JavaScript 实现#

除了系统或浏览器自动切换模式外，我们常常需要通过页面中的按钮来手动切换主题。由于浏览器没有提供直接切换不同模式的 API，我们需要借助 JavaScript 来实现这一功能。

下面是一个实现动态主题切换的完整示例：

<!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 {
        color-scheme: light dark;
      }
      body {
        --bg-color: #ffffff;
        --text-color: #333333;
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
      }
      body.dark-mode {
        --bg-color: #333333;
        --text-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到主题切换世界！</h1>
    <button id="themeSwitcher">切换主题</button>

    <script>
      const themeSwitcher = document.getElementById('themeSwitcher')
      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')

      function setTheme(theme) {
        if (theme === 'dark') {
          document.body.classList.add('dark-mode')
        } else {
          document.body.classList.remove('dark-mode')
        }
        localStorage.setItem('theme', theme)
      }

      // 初始化主题
      const savedTheme = localStorage.getItem('theme')
      if (savedTheme) {
        setTheme(savedTheme)
      } else if (prefersDarkScheme.matches) {
        setTheme('dark')
      }

      // 切换主题
      themeSwitcher.addEventListener('click', () => {
        const currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light')
        const newTheme = currentTheme === 'light' ? 'dark' : 'light'
        setTheme(newTheme)
      })

      // 监听系统主题变化
      prefersDarkScheme.addEventListener('change', (e) => {
        const newTheme = e.matches ? 'dark' : 'light'
        setTheme(newTheme)
      })
    </script>
  </body>
</html>

这段代码通过添加dark-mode类和使用 CSS 变量来实现样式切换。它不仅允许用户手动切换主题，还能监听系统主题的变化，自动调整网页主题，从而提供更好的用户体验。

通过以上方法，我们可以轻松实现网页的明暗主题切换，为用户提供更加舒适和个性化的浏览体验。