发布于 由admin

研究 prefers-color-scheme 媒体特性在主题切换中的作用

prefers-color-scheme：响应用户主题偏好的利器

大家好，今天我们来深入探讨 prefers-color-scheme 这个 CSS 媒体特性，以及它在网站和应用程序主题切换中的作用。prefers-color-scheme 允许我们的网页根据用户的系统主题偏好（浅色或深色）进行适配，从而提供更个性化和舒适的用户体验。它不仅仅是一个简单的开关，而是响应式设计理念在主题层面的延伸。

1. 什么是 prefers-color-scheme？

prefers-color-scheme 是一个 CSS 媒体特性，用于检测用户是否已在其操作系统或浏览器中请求使用浅色或深色主题。 它可以接受两个主要的值：

  • light: 指示用户偏好浅色主题。
  • dark: 指示用户偏好深色主题。

除了这两个主要值，还可能返回 no-preference， 表示用户没有明确的偏好设置。

2. 如何使用 prefers-color-scheme？

prefers-color-scheme 通常与 @media 规则一起使用，以便根据用户的偏好应用不同的 CSS 样式。以下是一个简单的示例：

/* 默认样式（通常是浅色主题） */
body {
  background-color: white;
  color: black;
}

/* 当用户偏好深色主题时 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

在这个例子中，默认情况下，body 的背景色是白色，文字颜色是黑色（浅色主题）。但是，当用户在其系统中启用了深色主题时，@media (prefers-color-scheme: dark) 规则会被激活，body 的背景色变为黑色，文字颜色变为白色（深色主题）。

3. 实际应用场景：一个更复杂的示例

让我们看一个更实际的例子，包含更完整的样式设置：

<!DOCTYPE html>
<html>
<head>
<title>prefers-color-scheme Demo</title>
<style>
body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f9f9f9; /* Default: light background */
  color: #333;        /* Default: dark text */
}

h1 {
  color: #007bff; /* Default: Blue heading */
}

.container {
  border: 1px solid #ddd; /* Default: Light border */
  padding: 20px;
  margin-bottom: 20px;
  background-color: white; /* Default: White container */
}

button {
  background-color: #007bff; /* Default: Blue button */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212; /* Dark background */
    color: #eee;        /* Light text */
  }

  h1 {
    color: #66b3ff; /* Lighter blue heading */
  }

  .container {
    border: 1px solid #333; /* Dark border */
    background-color: #222; /* Dark container */
  }

  button {
    background-color: #3399ff; /* Lighter blue button */
  }
}
</style>
</head>
<body>

<h1>prefers-color-scheme Demo</h1>

<div class="container">
  <p>This is a container with some text. It changes appearance based on your system's color scheme preference.</p>
  <button>Click Me</button>
</div>

</body>
</html>

在这个例子中，我们定义了浅色主题的默认样式，然后使用 @media (prefers-color-scheme: dark) 规则来覆盖这些样式，从而实现深色主题。我们改变了 body、h1、container 和 button 的颜色，以适应深色环境。

4. JavaScript 辅助：手动切换主题

虽然 prefers-color-scheme 可以自动检测用户的主题偏好，但在某些情况下，我们可能希望提供手动切换主题的选项。 这可以通过 JavaScript 来实现。

首先，我们需要一个切换主题的按钮：

<button id="theme-toggle">切换主题</button>

然后，我们可以使用 JavaScript 来监听按钮的点击事件，并切换主题。 关键在于，我们需要一种方式来存储用户选择的主题，以便在页面重新加载后仍然保持用户的偏好。 可以使用 localStorage 来实现：

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// 获取用户存储的主题，如果没有则默认为系统偏好
let currentTheme = localStorage.getItem('theme') || 'system';

// 设置初始主题
setTheme(currentTheme);

// 监听按钮点击事件
themeToggle.addEventListener('click', () => {
  if (currentTheme === 'light') {
    currentTheme = 'dark';
  } else if (currentTheme === 'dark') {
    currentTheme = 'system';
  } else {
    currentTheme = 'light';
  }

  setTheme(currentTheme);
});

function setTheme(theme) {
  localStorage.setItem('theme', theme); // 保存主题到 localStorage
  currentTheme = theme;

  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    // 系统偏好
    body.classList.remove('dark-theme');
    body.classList.remove('light-theme');
  }
}

在这个 JavaScript 代码中，我们：

  1. 获取 theme-toggle 按钮和 body 元素。
  2. 从 localStorage 中获取用户存储的主题，如果不存在，则默认为 system（系统偏好）。
  3. 定义了一个 setTheme 函数，用于设置主题。该函数将主题保存到 localStorage，并根据主题添加或删除 body 元素的 CSS 类（dark-theme 或 light-theme）。
  4. 监听 theme-toggle 按钮的点击事件。当按钮被点击时，我们切换主题，并调用 setTheme 函数来更新页面。

为了使这个 JavaScript 代码生效，我们还需要在 CSS 中定义 .dark-theme 和 .light-theme 类：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f9f9f9; /* Default: light background */
  color: #333;        /* Default: dark text */
}

h1 {
  color: #007bff; /* Default: Blue heading */
}

.container {
  border: 1px solid #ddd; /* Default: Light border */
  padding: 20px;
  margin-bottom: 20px;
  background-color: white; /* Default: White container */
}

button {
  background-color: #007bff; /* Default: Blue button */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* Dark theme based on class */
body.dark-theme {
  background-color: #121212; /* Dark background */
  color: #eee;        /* Light text */
}

body.dark-theme h1 {
  color: #66b3ff; /* Lighter blue heading */
}

body.dark-theme .container {
  border: 1px solid #333; /* Dark border */
  background-color: #222; /* Dark container */
}

body.dark-theme button {
  background-color: #3399ff; /* Lighter blue button */
}

/* Light theme based on class (optional, for overriding dark theme) */
body.light-theme {
  background-color: #f9f9f9;
  color: #333;
}

body.light-theme h1 {
  color: #007bff;
}

body.light-theme .container {
  border: 1px solid #ddd;
  background-color: white;
}

body.light-theme button {
  background-color: #007bff;
}

/* Dark theme based on system preference */
@media (prefers-color-scheme: dark) {
  body:not(.light-theme) { /* Only apply if not explicitly set to light theme */
      background-color: #121212;
      color: #eee;
  }
  body:not(.light-theme) h1 {
      color: #66b3ff;
  }
  body:not(.light-theme)  .container {
      border: 1px solid #333;
      background-color: #222;
  }
  body:not(.light-theme) button {
      background-color: #3399ff;
  }
}

现在，我们既可以根据用户的系统偏好自动切换主题，也可以让用户手动切换主题。 当用户手动切换主题时，我们使用 CSS 类来覆盖默认样式和 @media (prefers-color-scheme: dark) 规则。 关键在于，我们需要确保手动切换的主题优先级高于系统偏好。 通过使用 :not(.light-theme) 选择器，我们可以确保在用户明确选择了浅色主题时，不应用系统偏好的深色主题样式。

5. 使用 CSS Variables (Custom Properties)

CSS 变量可以使主题切换更加灵活和可维护。 我们可以定义一组 CSS 变量来表示颜色、字体等样式属性，然后根据主题偏好来更改这些变量的值。

:root {
  --bg-color: #f9f9f9;
  --text-color: #333;
  --heading-color: #007bff;
  --container-bg-color: white;
  --container-border-color: #ddd;
  --button-bg-color: #007bff;
}

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

h1 {
  color: var(--heading-color);
}

.container {
  border: 1px solid var(--container-border-color);
  padding: 20px;
  margin-bottom: 20px;
  background-color: var(--container-bg-color);
}

button {
  background-color: var(--button-bg-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #eee;
    --heading-color: #66b3ff;
    --container-bg-color: #222;
    --container-border-color: #333;
    --button-bg-color: #3399ff;
  }
}

在这个例子中，我们定义了一组 CSS 变量，并在整个样式表中使用这些变量。 当用户切换到深色主题时，我们只需要更改这些变量的值，就可以一次性更新整个页面的样式。

与JavaScript手动切换主题配合使用时，JavaScript也需要修改这些CSS变量：

const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement; // Get the root element

let currentTheme = localStorage.getItem('theme') || 'system';

setTheme(currentTheme);

themeToggle.addEventListener('click', () => {
    if (currentTheme === 'light') {
        currentTheme = 'dark';
    } else if (currentTheme === 'dark') {
        currentTheme = 'system';
    } else {
        currentTheme = 'light';
    }

    setTheme(currentTheme);
});

function setTheme(theme) {
    localStorage.setItem('theme', theme);
    currentTheme = theme;

    if (theme === 'dark') {
        setDarkTheme();
    } else if (theme === 'light') {
        setLightTheme();
    } else {
        // System preference
        resetTheme();
    }
}

function setDarkTheme() {
    root.style.setProperty('--bg-color', '#121212');
    root.style.setProperty('--text-color', '#eee');
    root.style.setProperty('--heading-color', '#66b3ff');
    root.style.setProperty('--container-bg-color', '#222');
    root.style.setProperty('--container-border-color', '#333');
    root.style.setProperty('--button-bg-color', '#3399ff');
}

function setLightTheme() {
    root.style.setProperty('--bg-color', '#f9f9f9');
    root.style.setProperty('--text-color', '#333');
    root.style.setProperty('--heading-color', '#007bff');
    root.style.setProperty('--container-bg-color', 'white');
    root.style.setProperty('--container-border-color', '#ddd');
    root.style.setProperty('--button-bg-color', '#007bff');
}

function resetTheme() {
    // Reset to the default values, allowing prefers-color-scheme to take over
    root.style.removeProperty('--bg-color');
    root.style.removeProperty('--text-color');
    root.style.removeProperty('--heading-color');
    root.style.removeProperty('--container-bg-color');
    root.style.removeProperty('--container-border-color');
    root.style.removeProperty('--button-bg-color');
}

在这个更新后的 JavaScript 代码中，我们：

  1. 使用 document.documentElement 获取根元素（<html>）。
  2. 定义了 setDarkTheme、setLightTheme 和 resetTheme 函数，用于设置深色主题、浅色主题和重置主题。
  3. 在 setDarkTheme 和 setLightTheme 函数中，我们使用 root.style.setProperty 方法来设置 CSS 变量的值。
  4. 在 resetTheme 函数中，我们使用 root.style.removeProperty 方法来移除 CSS 变量的值，从而使 prefers-color-scheme 能够接管主题。

6. 兼容性考虑

prefers-color-scheme 的兼容性非常好，几乎所有现代浏览器都支持它。

浏览器 版本 支持情况
Chrome 76+ 支持
Firefox 67+ 支持
Safari 12.1+ 支持
Edge 79+ 支持
Opera 63+ 支持
iOS Safari 12.1+ 支持
Android Browser 不支持
IE 不支持

对于不支持 prefers-color-scheme 的浏览器，我们可以提供一个默认的主题，或者使用 JavaScript 来检测用户的主题偏好（虽然这种方法比较复杂且不可靠）。

7. 注意事项

  • 不要过度依赖 JavaScript： 尽可能使用 CSS 来实现主题切换，只有在必要时才使用 JavaScript。
  • 提供默认主题： 确保在用户没有明确的主题偏好时，提供一个默认的主题。
  • 测试： 在不同的浏览器和操作系统上测试你的主题切换实现，以确保它在所有环境中都能正常工作。
  • 可访问性： 确保你的主题切换实现是可访问的，例如，为切换主题的按钮提供适当的 ARIA 属性。
  • 对比度： 确保你的主题具有足够的对比度，以便用户能够轻松阅读文本和识别元素。 可以使用在线工具或浏览器插件来检查对比度。
  • 动画： 在主题切换时，可以使用 CSS 过渡和动画来提供更平滑的用户体验。 然而，不要过度使用动画，以免分散用户的注意力。
  • 图片： 考虑为浅色和深色主题提供不同的图片资源。 例如，可以使用 <picture> 元素或 CSS background-image 属性来根据主题选择不同的图片。

8. 总结：主题偏好适配的要点

prefers-color-scheme 是一个强大的工具，可以帮助我们构建更个性化和用户友好的网站和应用程序。 通过合理地利用它，我们可以为用户提供更好的体验，并提高网站的可访问性。 结合 CSS 变量和 JavaScript，我们可以实现灵活且可维护的主题切换方案。 记住，响应用户偏好是良好用户体验的关键。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注