Tailwind CSS - 深色模式

Tailwind CSS：实现暗黑模式

暗黑模式已成为现代网站和应用程序的必备功能，可减少在弱光环境下的眼睛疲劳。Tailwind CSS 提供了一个强大且灵活的系统，用于使用特殊的 dark 变体来实现暗黑模式。

推荐策略：基于类的切换

管理暗黑模式最灵活和推荐的方式是 class 策略。当父元素（通常是 <html> 标签）上存在 .dark 类时，此方法会应用暗黑模式样式。这让您能够完全控制通过 JavaScript 手动切换暗黑模式。

步骤 1：配置 tailwind.config.js

首先，您需要在配置文件中启用 class 策略。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 将 `darkMode` 设置为 'class' 以启用手动切换
  darkMode: 'class',
  content: [
    './*.{html,js}',
    // 添加所有模板文件的路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 2：使用 dark: 变体为元素设置样式

现在，您可以为任何工具类加上 dark: 前缀，以指定仅在暗黑模式激活时才应应用的样式。第一个类用于亮色模式，带有 dark: 前缀的类用于暗黑模式。

<!--
  - 默认情况下将使用 bg-white（亮色模式）。
  - 当 .dark 类激活时将使用 dark:bg-slate-900。
-->
<body class="bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300">

  <!--
    - 默认情况下，卡片背景为亮色。
    - 在暗黑模式下，它将获得更深的背景。
  -->
  <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-lg shadow-md">
    <h2 class="text-slate-900 dark:text-white">卡片标题</h2>
    <p>这是卡片内的一些内容。</p>
  </div>

</body>

实际示例：主题切换按钮

这是一个完整、可运行的示例，展示了如何创建一个主题切换按钮。此脚本尊重用户的操作系统偏好设置，将其选择持久化到 localStorage 中，并允许他们手动切换主题。

<!DOCTYPE html>
<!-- class 属性将由 JavaScript 动态填充 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Dark Mode Toggle</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // 要在 tailwind.config.js 中设置 darkMode 为 'class' 才能使其工作。
    module.exports = { darkMode: 'class' }
  </script>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300 font-sans">

  <div class="min-h-screen flex flex-col items-center justify-center p-4">
    <div class="w-full max-w-md bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg p-8">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">暗黑模式示例</h1>
      <p class="mb-6">点击下面的按钮切换主题。</p>

      <button id="theme-toggle" type="button" class="px-4 py-2 font-semibold text-white bg-blue-600 dark:bg-yellow-400 dark:text-gray-900 rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-yellow-300">
        <span class="dark:hidden">切换到暗黑模式</span>
        <span class="hidden dark:inline">切换到亮色模式</span>
      </button>
    </div>
    <p class="mt-4 text-sm text-gray-500">您的选择将被记住。</p>
  </div>

  <script>
    const themeToggle = document.getElementById('theme-toggle');
    const docElement = document.documentElement;

    // 应用主题的函数
    const applyTheme = (theme) => {
      if (theme === 'dark') {
        docElement.classList.add('dark');
      } else {
        docElement.classList.remove('dark');
      }
      localStorage.setItem('theme', theme);
    };

    // 检查 localStorage 中保存的主题或用户的操作系统偏好设置
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initialTheme = savedTheme ? savedTheme : (prefersDark ? 'dark' : 'light');

    applyTheme(initialTheme);

    // 切换按钮的事件监听器
    themeToggle.addEventListener('click', () => {
      const currentTheme = docElement.classList.contains('dark') ? 'dark' : 'light';
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      applyTheme(newTheme);
    });
  </script>

</body>
</html>

高级自定义

对于高级用例，例如与使用不同类名或数据属性的组件库集成，您可以在 tailwind.config.js 中自定义暗黑模式选择器：

// 示例：使用数据属性代替类
// 现在，当元素具有 `data-theme="dark"` 时，暗黑模式将激活

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector', '[data-theme="dark"]'],
  // ...
}