暗黑模式（Dark Mode）的 CSS 实现方案

在现代前端开发中，暗黑模式已成为提升用户体验的重要功能。CSS 提供了多种实现暗黑模式的方案，其中巧妙运用 CSS 变量和媒体查询是最高效的方式之一。

1. CSS 变量与作用域

CSS 自定义属性（变量）的作用域特性使其成为实现主题切换的理想选择：

css 复制代码

:root {
  --primary-color: #3498db;
  --background-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --background-color: #1a1a1a;
  --text-color: #f5f5f5;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

这种方案利用了 CSS 变量的作用域特性 - 在 :root 中定义默认值，在特定选择器下覆盖这些值。

2. 媒体查询实现系统级暗黑模式

CSS 的 prefers-color-scheme 媒体查询可以直接响应操作系统级别的暗黑模式设置：

css 复制代码

:root {
  --primary-color: #3498db;
  --background-color: #ffffff;
  --text-color: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --text-color: #f5f5f5;
  }
}

3. 结合 JavaScript 的动态切换

通过 JavaScript 操作 DOM 的 class 或属性，可以实现用户手动切换主题的功能：

javascript 复制代码

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark-mode');
  // 或使用属性
  // document.documentElement.setAttribute('data-theme', 
  //   document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}

4. 作用域隔离的组件级主题

在组件化开发中，可以利用 CSS 变量的作用域实现组件级别的主题隔离：

css 复制代码

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

.dark-mode .component {
  --component-bg: #2d2d2d;
  --component-text: #eaeaea;
}

5. 现代 CSS 函数增强暗黑模式

使用 CSS 的 color-mix()、hsl() 等函数可以创建更灵活的主题系统：

css 复制代码

:root {
  --primary-hue: 210;
  --primary-saturation: 70%;
  --primary-lightness: 50%;
  
  --primary-color: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    var(--primary-lightness)
  );
}

.dark-mode {
  --primary-lightness: 60%;
}

最佳实践建议

渐进增强：始终提供默认的亮色主题，然后通过媒体查询或 JavaScript 增强暗黑模式支持
性能优化：减少不必要的重绘，使用 CSS 变量和过渡效果提升用户体验
可访问性：确保暗黑模式下的颜色对比度符合 WCAG 标准
持久化：使用 localStorage 保存用户偏好

通过合理运用 CSS 的作用域和函数特性，开发者可以构建灵活、高效且用户友好的暗黑模式实现方案。