实现暗黑模式和主题切换

Tailwind CSS 提供了内置的暗黑模式支持，允许你轻松实现暗黑主题。通过使用 Tailwind 的 dark 变体类和配置文件中的设置，你可以切换应用的亮色和暗色模式。除此之外，还可以通过 JavaScript 进行主题切换，使用户能够在亮色和暗色模式之间自由切换。

1. 启用暗黑模式

配置 Tailwind 的暗黑模式

要启用暗黑模式，首先需要在 tailwind.config.js 文件中进行配置。你可以使用 media 或 class 来启用暗黑模式。

  • media: 基于用户操作系统的偏好设置自动切换。
  • class: 通过添加 dark 类手动切换。
module.exports = {
  darkMode: 'class', // 或者 'media'
  theme: {
    extend: {},
  },
  plugins: [],
}

在 HTML 中应用暗黑模式

如果你选择了 darkMode: 'class'，你需要在 HTML 文档中手动添加或移除 dark 类。通常我们会在 <html> 标签上切换 dark 类：

<html class="dark">

当添加了 dark 类后，所有带有 dark: 前缀的 Tailwind 样式类将被应用。

2. 使用 Tailwind 的 dark: 变体

Tailwind 提供了 dark: 变体类，用于在暗黑模式下应用样式。你可以像使用其他变体（如 hover:、focus:）一样使用它。

示例：按钮的亮色和暗黑模式样式

<button class="bg-white text-black dark:bg-gray-800 dark:text-white px-4 py-2 rounded">
  切换模式
</button>

在亮色模式下，按钮将使用白色背景和黑色文本，而在暗黑模式下，按钮会切换为灰色背景和白色文本。

3. 动态主题切换

为了让用户能够在亮色和暗黑模式之间手动切换，你可以使用 JavaScript 来动态添加和移除 dark 类。

示例：通过按钮切换暗黑模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind 暗黑模式切换</title>
  <script>
    // 页面加载时，根据用户偏好或本地存储设置主题
    if (localStorage.getItem('theme') === 'dark' || 
        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    // 切换主题函数
    function toggleTheme() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen flex items-center justify-center">
  <div class="text-center">
    <h1 class="text-3xl font-bold mb-6">Tailwind 暗黑模式切换</h1>
    <button onclick="toggleTheme()" class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-6 py-2 rounded">
      切换主题
    </button>
  </div>
</body>
</html>

解释

  • 本地存储与系统偏好: 页面加载时，我们检查用户是否已经选择了特定主题（存储在 localStorage 中）。如果没有选择，则根据操作系统的主题偏好来设置初始模式。
  • 主题切换按钮: toggleTheme() 函数会在用户点击按钮时切换主题，并将用户的选择保存在 localStorage 中，以便下次访问时自动应用。

4. 更复杂的主题系统

除了暗黑模式，你还可以扩展 Tailwind 的设计系统，支持多种自定义主题。以下是通过 CSS 变量实现多主题切换的示例。

多主题切换示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多主题切换</title>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #000000;
    }
    .theme-dark {
      --bg-color: #1a202c;
      --text-color: #f7fafc;
    }
    .theme-light {
      --bg-color: #ffffff;
      --text-color: #000000;
    }
    .theme-blue {
      --bg-color: #ebf8ff;
      --text-color: #2b6cb0;
    }
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }
  </style>
  <script>
    function setTheme(theme) {
      document.documentElement.className = theme;
      localStorage.setItem('theme', theme);
    }
    // 页面加载时设置主题
    document.documentElement.className = localStorage.getItem('theme') || 'theme-light';
  </script>
</head>
<body class="min-h-screen flex flex-col items-center justify-center">
  <h1 class="text-3xl font-bold mb-6">多主题切换</h1>
  <div class="space-x-4">
    <button onclick="setTheme('theme-light')" class="px-4 py-2 rounded bg-gray-200">亮色主题</button>
    <button onclick="setTheme('theme-dark')" class="px-4 py-2 rounded bg-gray-700 text-white">暗黑主题</button>
    <button onclick="setTheme('theme-blue')" class="px-4 py-2 rounded bg-blue-200">蓝色主题</button>
  </div>
</body>
</html>

解释

  • CSS 变量: 我们定义了 --bg-color 和 --text-color 这两个 CSS 变量，分别用于背景颜色和文本颜色。不同的主题类（如 .theme-dark、.theme-light 和 .theme-blue）将这些变量设置为不同的值。
  • 主题切换函数: setTheme() 函数根据用户的选择切换主题，并将选择保存在 localStorage 中。

总结

通过 Tailwind 的 dark: 变体类和简单的 JavaScript，你可以轻松实现暗黑模式切换。通过扩展，甚至可以实现多主题系统，增强用户体验的灵活性。Tailwind 的设计体系与自定义类的结合，使得实现个性化主题变得既强大又简洁。

Last Updated::