🌙 Tailwind CSS 深色模式（Dark Mode）

Tailwind CSS 内置 暗黑模式（Dark Mode） 支持，允许你轻松切换 浅色（Light） 和 深色（Dark） 主题，而无需额外的 CSS 代码。

🎯 1. 启用深色模式

默认情况下，Tailwind CSS 的深色模式是 关闭 的，你需要在 tailwind.config.js 中启用它。

✅ 修改 tailwind.config.js

module.exports = {
  darkMode: 'class', // 也可以用 'media'
};

🔹 darkMode: 'class'（推荐）：需要手动在 <html> 或 <body> 添加 class="dark" 来切换模式。
🔹 darkMode: 'media'：自动检测用户系统的 prefers-color-scheme，如果系统是深色模式，则启用。

🎯 2. 基本用法

Tailwind 提供 dark: 前缀，让你轻松定义 深色模式下的样式。

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6">
  这个 div 在深色模式下变成黑色背景、白色文本
</div>

📌 默认浅色模式（白底黑字） → 深色模式（黑底白字）

🎯 3. 适配不同元素

✅ 按钮

<button class="bg-blue-500 text-white p-2 rounded dark:bg-blue-700">
  深色模式按钮
</button>

📌 在深色模式下，按钮颜色变深

✅ 输入框

<input type="text" class="border border-gray-300 bg-white text-black dark:border-gray-600 dark:bg-gray-800 dark:text-white p-2">

📌 输入框的背景、边框和文本颜色在深色模式下调整

✅ 卡片组件

<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
  <h2 class="text-lg font-bold text-black dark:text-white">标题</h2>
  <p class="text-gray-700 dark:text-gray-300">深色模式的卡片内容</p>
</div>

📌 背景、标题、正文颜色在深色模式下变化

🎯 4. 深色模式切换（手动）

如果你使用 darkMode: 'class'，需要在 <html> 上添加 dark 类来切换模式。

✅ JavaScript 方式

<button id="toggleDarkMode" class="px-4 py-2 bg-gray-300 dark:bg-gray-700 text-black dark:text-white">
  切换模式
</button>

<script>
  const toggleBtn = document.getElementById("toggleDarkMode");
  toggleBtn.addEventListener("click", () => {
    document.documentElement.classList.toggle("dark");
  });
</script>

📌 点击按钮，在 html 标签上添加或移除 dark 类，实现深色模式切换。

🎯 5. 深色模式自动检测

如果你使用 darkMode: 'media'，浏览器会自动检测用户的系统主题（macOS、Windows 适用）。

@media (prefers-color-scheme: dark) {
  /* 这里写自定义的深色模式样式 */
}

📌 无需手动切换，用户的系统如果是暗色模式，网页就会自动变暗。

🎯 6. 结合 LocalStorage 记住用户选择

<button id="toggleDarkMode" class="px-4 py-2 bg-gray-300 dark:bg-gray-700 text-black dark:text-white">
  切换模式
</button>

<script>
  const toggleBtn = document.getElementById("toggleDarkMode");
  const html = document.documentElement;

  // 读取本地存储，初始化模式
  if (localStorage.getItem("theme") === "dark") {
    html.classList.add("dark");
  }

  toggleBtn.addEventListener("click", () => {
    if (html.classList.contains("dark")) {
      html.classList.remove("dark");
      localStorage.setItem("theme", "light");
    } else {
      html.classList.add("dark");
      localStorage.setItem("theme", "dark");
    }
  });
</script>

📌 刷新页面后，网页仍然保持用户上次的选择。

🎯 7. 响应式深色模式

<p class="text-gray-800 sm:dark:text-gray-300 md:dark:text-gray-400">
  不同屏幕深色模式颜色不同
</p>

📌 小屏幕 gray-300，中等屏幕 gray-400，适用于不同设备

🎯 8. 深色模式背景图片

<div class="bg-[url('/light-image.jpg')] dark:bg-[url('/dark-image.jpg')] h-64">
  深色模式背景
</div>

📌 白天显示 light-image.jpg，夜间显示 dark-image.jpg

🎯 9. 深色模式 + 透明度

<div class="bg-white/90 dark:bg-black/80 p-4">
  透明背景适配深色模式
</div>

📌 透明度适配深色模式，增强 UI 效果

🎯 10. 适用于 Tailwind 组件

<div class="max-w-sm rounded-lg shadow-lg bg-white dark:bg-gray-900 p-6">
  <h3 class="text-black dark:text-white font-bold">卡片标题</h3>
  <p class="text-gray-600 dark:text-gray-300">这是卡片内容，深色模式自动适配</p>
</div>

📌 轻松适配卡片、模态框、侧边栏等 UI 组件

🎯 总结

功能实现方式
启用深色模式darkMode: 'class' 或 darkMode: 'media'
切换背景bg-white dark:bg-black
文字颜色text-black dark:text-white
按钮适配bg-gray-200 dark:bg-gray-700
手动切换模式document.documentElement.classList.toggle("dark")
记住用户选择localStorage.setItem("theme", "dark")
响应式深色模式sm:dark:text-gray-300
背景图片bg-[url('/light.jpg')] dark:bg-[url('/dark.jpg')]

🎉 总结

✅ 只需 dark: 前缀即可实现深色模式
✅ 无需额外 CSS，所有组件都可自动适配
✅ 支持 darkMode: 'class'（手动）和 darkMode: 'media'（自动）
✅ 可结合 JavaScript 进行用户主题切换和存储

🚀 使用 Tailwind CSS，让你的网页轻松支持深色模式！ 🌙✨