深色模式（Dark Mode）是一种用户界面显示模式，采用深色背景和浅色文字，有助于降低屏幕亮度对眼睛的刺激，节省设备电量。以下介绍实现深色模式的简单方法，包括手动切换、系统偏好检测以及使用 CSS 和 JavaScript 的综合实现。

---

一、深色模式的基础原理

深色模式的实现基于以下核心思想：

1. 颜色反转：将默认的浅色背景和深色文字替换为深色背景和浅色文字。
2. 主题切换：通过 CSS 变量或媒体查询定义主题，并动态切换。
3. 用户偏好检测：通过系统设置自动适配深色模式。

---

二、使用 CSS 媒体查询实现深色模式

现代浏览器支持检测用户的系统偏好，通过 prefers-color-scheme 媒体查询实现。

1. 基本实现

/* 默认模式（浅色模式） */
body {
  background-color: #ffffff;
  color: #000000;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

2. 添加渐变背景示例

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(to bottom, #333, #000);
    color: #e0e0e0;
  }
}

3. 支持多种元素样式

@media (prefers-color-scheme: dark) {
  header {
    background-color: #1a1a1a;
  }
  a {
    color: #4a90e2;
  }
}

---

三、通过 CSS 变量实现主题切换

CSS 变量（自定义属性）可以方便地管理多种主题样式，结合 JavaScript 实现手动切换。

1. 定义主题变量

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --background-color: #121212;
  --text-color: #ffffff;
}

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

2. 配合 JavaScript 切换主题

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

toggleThemeButton.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
});

3. 示例 HTML

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

---

四、结合系统偏好和手动切换

可以同时检测系统偏好，并提供用户手动切换选项。

1. 检测系统偏好

使用 JavaScript 监听系统偏好的变化：

const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

prefersDarkScheme.addEventListener('change', (e) => {
  const newColorScheme = e.matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', newColorScheme);
});

2. 优化用户体验

将用户选择保存到本地存储：

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

toggleThemeButton.addEventListener('click', () => {
  const currentTheme = localStorage.getItem('theme') || 'light';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

// 初始化主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
} else if (prefersDarkScheme.matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

---

五、框架或库的深色模式支持

1. 使用 Tailwind CSS 的深色模式

Tailwind CSS 提供了内置支持：

// 在 tailwind.config.js 中启用
module.exports = {
  darkMode: 'class', // 或 'media'
  theme: {
    extend: {},
  },
};

定义深色模式样式：

<div class="bg-white text-black dark:bg-black dark:text-white">
  深色模式支持
</div>

通过切换 class 实现：

document.documentElement.classList.toggle('dark');

---

六、深色模式的最佳实践

1. 使用渐进增强

默认加载浅色模式，并根据系统或用户偏好加载深色样式。

2. 保持对比度

确保文字与背景之间的对比足够大，以提高可读性。

3. 颜色优化

选择柔和的深色背景（如 #121212）和高亮的前景色（如 #e0e0e0）。

4. 动画和过渡

为主题切换添加过渡效果提升用户体验：

body {
  transition: background-color 0.3s, color 0.3s;
}

---

通过以上方法，你可以轻松实现深色模式并提升用户体验，同时兼顾系统偏好与用户选择的灵活性。

以上为如何实现深色模式的详细介绍，更多信息请关注其他相关文章！