网页实现黑暗模式的几种方式

## 实现暗黑模式的最佳方式

在现代网页设计中，暗黑模式已成为提高用户体验的重要功能。实现暗黑模式不仅可以减少用户眼睛的疲劳，还能在某些情况下节省设备电量。本文将介绍实现暗黑模式的几种最佳方式。

### 使用 CSS 变量 (CSS Custom Properties)

CSS 变量是一种便捷的实现主题切换的方法。通过定义全局变量来控制颜色，可以很容易地在不同的主题之间切换。

```css
/* 定义全局变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* 暗黑模式变量 */
.dark-mode {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* 使用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
```

### 使用 JavaScript 切换主题

可以使用 JavaScript 来检测用户的选择并切换主题。

```javascript
const toggleDarkMode = () => {
  document.body.classList.toggle('dark-mode');
};

/* 绑定事件监听器 */
document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
```

### 持久化用户选择

使用 `localStorage` 来保存用户的主题选择，这样用户在重新访问网站时可以保持其选择。

```javascript
const setDarkMode = (isDark) => {
  if (isDark) {
    document.body.classList.add('dark-mode');
    localStorage.setItem('theme', 'dark');
  } else {
    document.body.classList.remove('dark-mode');
    localStorage.setItem('theme', 'light');
  }
};

/* 初始化 */
const initTheme = () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-mode');
  }
};

document.getElementById('dark-mode-toggle').addEventListener('click', () => {
  const isDark = document.body.classList.toggle('dark-mode');
  setDarkMode(isDark);
});

/* 在页面加载时调用 */
initTheme();
```

### 媒体查询检测用户系统偏好

使用 CSS 的 `prefers-color-scheme` 媒体查询可以检测用户系统的主题偏好，并根据系统设置自动应用相应的主题。

```css
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000000;
    --text-color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #ffffff;
    --text-color: #000000;
  }
}
```

### 提供手动切换选项

即使网站可以自动检测用户系统偏好，仍然应该提供一个手动切换主题的选项，确保用户能够根据自己的需求进行选择。

### 结论

实现暗黑模式的最佳方式是结合使用 CSS 变量、JavaScript 和媒体查询，以提供最佳的用户体验和灵活性。通过持久化用户的选择，并在系统偏好和手动选择之间提供无缝的切换，能够大大提升网站的用户体验。