主题切换一般指 暗黑模式（Dark Mode）/ 明亮模式（Light Mode）切换，还可以扩展成多主题。

---

🔹 常见实现方式

1. CSS 变量（推荐）

利用 :root 定义全局变量，根据主题切换修改变量。

/* 默认亮色主题 */
:root {
  --bg-color: #fff;
  --text-color: #000;
}

/* 暗黑主题 */
.dark {
  --bg-color: #121212;
  --text-color: #fff;
}

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

JS 控制切换：

function toggleTheme() {
  document.documentElement.classList.toggle('dark');
}

✅ 优点：灵活、性能好、易扩展多个主题。
❌ 缺点：需要用 var(--xxx) 管理颜色。

---

2. CSS 文件切换

分别写两套 CSS 文件，在切换时替换 <link>。

<link id="theme-link" rel="stylesheet" href="light.css" />

function setTheme(theme) {
  const link = document.getElementById('theme-link');
  link.href = theme === 'dark' ? 'dark.css' : 'light.css';
}

✅ 优点：简单直观。
❌ 缺点：切换时会闪烁、需要维护两份 CSS。

---

3. Tailwind / UI 框架内置方案

比如 Tailwind 的 darkMode: 'class'，通过 class="dark" 控制：

<div class="bg-white text-black dark:bg-black dark:text-white">
  Hello
</div>

JS 控制：

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

✅ 优点：和框架结合紧密，开发效率高。
❌ 缺点：依赖特定框架。

---

4. 媒体查询（自动跟随系统）

利用 CSS 的 prefers-color-scheme：

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #fff;
  }
}

✅ 优点：用户无感，自动跟随系统。
❌ 缺点：不支持手动切换，需要结合 JS 存储用户偏好。

---

🔹 用户偏好存储

通常结合 localStorage 记住选择：

const theme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.add(theme);

function toggleTheme() {
  const html = document.documentElement;
  if (html.classList.contains('dark')) {
    html.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  } else {
    html.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
}

---

✅ 总结

主题切换常见方案有：

1. CSS 变量切换（推荐，灵活、性能好）；
2. 切换 CSS 文件（简单但冗余）；
3. 框架内置方案（如 Tailwind 的 dark class）；
4. 媒体查询自动跟随系统。
   一般还会配合 localStorage 记住用户选择。