垦荒学园

简体中文

English

简体中文

English

切换主题

Tailwind CSS 深色模式 ​

深色模式（Dark Mode）已成为现代应用程序和网站的流行功能，它可以减少眼部疲劳，并在低光环境下提供更好的观看体验。Tailwind CSS 提供了一流的支持，让实现深色模式变得异常简单。

基本用法 ​

Tailwind 的深色模式功能通过一个特殊的变体 dark 来工作。你可以将 dark: 前缀添加到任何颜色相关的工具类前面，以指定该样式仅在深色模式下生效。

html
<div class="bg-white dark:bg-slate-800">
  <h2 class="text-slate-900 dark:text-white">Title</h2>
  <p class="text-slate-500 dark:text-slate-400">Content</p>
</div>

在这个例子中：

  • 默认情况下（浅色模式），div 的背景是白色 (bg-white)，标题是深灰色 (text-slate-900)。
  • 当深色模式激活时，div 的背景会变为深蓝灰色 (dark:bg-slate-800)，标题会变为白色 (dark:text-white)。

启用深色模式 ​

Tailwind 的深色模式默认是关闭的。要启用它，你需要在 tailwind.config.js 文件中设置 darkMode 选项。

有两种主要的策略来控制深色模式的激活：

1. 使用媒体查询 (media 策略) ​

这是最简单的方式。将 darkMode 设置为 'media'。

js
// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

在这种模式下，Tailwind 会使用 CSS 的 prefers-color-scheme 媒体查询。当用户的操作系统设置为深色模式时，dark: 变体就会自动生效。你不需要编写任何 JavaScript 代码。

优点：简单，零配置，自动响应系统设置。 缺点：无法让用户手动切换主题（例如，通过一个按钮）。

2. 使用类 (class 策略) ​

这是更灵活、更常用的方式。将 darkMode 设置为 'class'。

js
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

在这种模式下，dark: 变体是否生效取决于 HTML 的祖先元素上是否存在一个名为 dark 的类。通常，你会将这个类添加到 <html> 或 <body> 标签上。

html
<!-- 深色模式关闭 -->
<html>
<body>
  <!-- ... -->
</body>
</html>

<!-- 深色模式开启 -->
<html class="dark">
<body>
  <!-- ... -->
</body>
</html>

优点：允许用户手动控制主题切换。 缺点：需要你编写一些 JavaScript 代码来切换 <html> 标签上的 dark 类，并通常需要将用户的偏好设置保存在 localStorage 中。

手动切换主题的示例 JavaScript：

javascript
// 检查 localStorage 中是否有主题设置
if (localStorage.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() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.theme = isDark ? 'dark' : 'light';
}

选择哪种策略取决于你的项目需求。如果你想快速实现并跟随系统设置，media 策略就足够了。如果你想给用户提供手动控制的选项，class 策略是更好的选择。