2025年7月21日中文

通过这份综合指南在您的网站上实施深色模式。了解 CSS 媒体查询、JavaScript 切换、辅助功能考量以及提供无缝用户体验的最佳实践。

深色模式实施：使用 CSS 和 JavaScript 的综合指南

深色模式越来越受欢迎，尤其是在弱光环境下，它可以提供更舒适的观看体验。本指南全面概述了如何使用 CSS 和 JavaScript 在您的网站上实施深色模式，确保为全球用户提供无缝且易于访问的用户体验。

为什么要实施深色模式？

有几个令人信服的理由可以考虑实施深色模式：

改善用户体验：许多用户发现深色模式对眼睛更友好，可以减轻眼睛疲劳，尤其是在夜间或光线昏暗的环境中浏览时。这迎合了具有不同屏幕使用习惯和光照条件的全球受众。
辅助功能：深色模式可以改善视力障碍或光敏感用户的辅助功能。通过提供高对比度选项，您可以使您的网站更具包容性。
电池寿命：在配备 OLED 或 AMOLED 屏幕的设备上，深色模式可以降低功耗，从而延长电池寿命。这与难以获得充电基础设施地区的移动用户尤其相关。
现代设计趋势：深色模式是一种流行的设计趋势，实施它可以使您的网站看起来更现代、更具吸引力。这可以提升品牌认知度和用户参与度。

实施深色模式的方法

有几种实施深色模式的方法，每种方法都有其自身的优点和缺点。我们将探讨最常见的方法：

CSS 媒体查询 (prefers-color-scheme)：此方法会根据用户的操作系统设置自动检测用户的首选配色方案。
JavaScript 切换：此方法提供一个手动切换（例如，开关或按钮），允许用户在浅色和深色模式之间切换。
结合使用媒体查询和 JavaScript：此方法结合了两种方法的优点，提供自动检测，同时还允许用户覆盖系统首选项。

1. 使用 CSS 媒体查询实施深色模式

prefers-color-scheme CSS 媒体查询允许您检测用户的首选配色方案并相应地应用不同的样式。对于已经设置系统首选项的用户来说，这是实施深色模式最直接有效的方法。

代码示例

将以下 CSS 添加到您的样式表：

            /* Default (Light) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Adjust other elements as needed */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

说明：

第一个 CSS 块定义了默认（浅色）主题样式。
仅当用户的系统设置为深色模式时，才会应用@media (prefers-color-scheme: dark)块的样式。
在@media块中，您可以为各种元素定义深色模式样式，例如正文背景和文本颜色、标题和链接。

优点

自动检测：浏览器自动检测用户的首选项，提供无缝体验。
简单实施：此方法需要的代码最少，并且易于实施。
性能：CSS 媒体查询由浏览器高效处理。

缺点

有限的控制：用户无法在您的网站内手动切换浅色和深色模式。
依赖于系统设置：外观完全取决于用户的系统设置，用户可能不知道或无法更改这些设置。

2. 使用 JavaScript 切换实施深色模式

使用 JavaScript 切换为用户提供了一个手动开关来控制网站的主题。这为用户提供了更多的控制权，并允许他们覆盖其系统首选项。对于迎合可能无法始终如一地支持或公开系统级深色模式设置的各种设备和平台上的用户来说，这种方法至关重要。

HTML 结构

首先，将切换元素添加到您的 HTML：

            <label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

这会使用复选框和一些自定义 CSS 样式创建一个简单的切换开关。

CSS 样式（可选）

您可以使用 CSS 设置切换开关的样式。这是一个例子：

            .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript 代码

现在，添加以下 JavaScript 代码来处理切换功能：

            const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

说明：

代码检索切换元素和正文元素。
toggleDarkMode函数在正文元素上切换dark-mode类。
代码使用localStorage存储用户的首选项，因此它会跨会话保持不变。
代码在页面加载时检查localStorage以应用保存的首选项。
将事件侦听器添加到切换，因此单击切换时会调用toggleDarkMode函数。

深色模式的 CSS 样式（使用类）

更新您的 CSS 以使用dark-mode类来应用深色主题样式：

            /* Default (Light) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dark Theme */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

优点

用户控制：用户可以在您的网站内手动切换浅色和深色模式。
持久性：用户的首选项使用localStorage保存，因此它会跨会话保持不变。

缺点

更复杂的实施：此方法比单独使用 CSS 媒体查询需要更多的代码。
JavaScript 依赖性：切换功能依赖于在用户的浏览器中启用 JavaScript。

3. 结合使用媒体查询和 JavaScript

最好的方法通常是将 CSS 媒体查询和 JavaScript 切换结合起来。这提供了两全其美的效果：自动检测用户的首选配色方案，同时还允许用户手动覆盖系统首选项。这迎合了更广泛的受众，包括那些可能不知道或无法更改其系统级主题设置的受众。

代码示例

使用 JavaScript 切换示例中的相同 HTML 和 CSS。修改 JavaScript 以检查系统首选项：

            const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference, then system preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

说明：

代码首先检查localStorage中是否有保存的首选项。
如果在localStorage中找不到首选项，它将使用window.matchMedia检查用户的系统是否首选深色模式。
如果系统首选深色模式，则将dark-mode类添加到正文，并选中切换。

优点

自动检测和用户控制：同时提供自动检测和手动控制。
持久性：用户的首选项使用localStorage保存。

缺点

稍微复杂一些：此方法比单独使用任何一种方法稍微复杂一些。
JavaScript 依赖性：依赖于启用 JavaScript。

辅助功能注意事项

在实施深色模式时，必须考虑辅助功能，以确保您的网站对所有用户都保持可用。请记住，仅仅反转颜色并不能自动保证辅助功能。以下是一些关键注意事项：

颜色对比度：确保在浅色和深色模式下，文本和背景之间有足够的颜色对比度。使用像 WebAIM 的对比度检查器 (webaim.org/resources/contrastchecker/) 这样的工具来验证您的颜色组合是否符合辅助功能标准。这对于低视力用户尤其重要。
焦点指示器：确保焦点指示器在浅色和深色模式下都清晰可见，以便使用键盘导航的用户可以轻松地看到当前聚焦的元素。
图像和图标：考虑图像和图标在深色模式下的外观。您可能需要提供备用版本或使用 CSS 过滤器来调整其颜色以获得最佳可见性。
用户测试：与有不同视力障碍的用户一起测试您的深色模式实施，以识别和解决任何辅助功能问题。

深色模式实施的最佳实践

以下是在您的网站上实施深色模式时应遵循的一些最佳实践：

使用 CSS 变量（自定义属性）：CSS 变量允许您在中心位置定义颜色和其他样式，从而更轻松地管理和更新您的主题。
彻底测试：在不同的设备和浏览器上测试您的深色模式实施，以确保一致性。
提供清晰的切换：使切换开关易于查找和使用。使用清晰直观的图标来指示其功能。
考虑用户首选项：尊重用户的首选项并使用localStorage或 cookie 保存它们。
保持一致性：确保您的深色模式实施在整个网站中保持一致。

示例：用于主题的 CSS 变量

CSS 变量使您可以轻松地在浅色和深色模式主题之间切换。在:root伪类中定义变量：

            :root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

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

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

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

现在，当将dark-mode类添加到正文时，CSS 变量会更新，并且会自动应用样式。

结论

实施深色模式可以显着增强您网站的用户体验、提高辅助功能，甚至可以节省电池寿命。通过遵循本指南中概述的技术和最佳实践，您可以为全球用户创造无缝且愉悦的深色模式体验。

请记住，优先考虑辅助功能并彻底测试您的实施，以确保您的网站对所有用户都保持可用，无论他们的偏好或视觉能力如何。

通过周到地实施深色模式，您不仅在追随潮流，而且还在为全球受众创造更具包容性和用户友好的 Web 体验。这种对用户体验的奉献精神可以极大地促进您网站的整体性能和吸引力。