深色模式

现在深色模式是很多操作系统的首要功能，设计一个深色版的网站来配合默认的设计变得越来越普遍。

为了使此操作尽可能简单，Tailwind 包含一个 dark 变体，当启用深色模式时，您可以为您的网站设置不同的样式：

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

请务必注意，出于文件大小的考虑，默认情况下，Tailwind 未开启深色模式变体。

要启用深色模式，请在 tailwind.config.js 文件中把 darkMode 选项设置为 media：

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

现在，只要用户的操作系统开启了深色模式，dark:{class} 类将优先于无前缀的类。media 策略在底层使用 prefers-color-scheme 媒体功能，但是，如果您想支持手动切换深色模式，您也可以使用 'class' 策略进行更多控制。

默认情况下，当 darkMode 启用时，只会为颜色相关的类生成 dark 变体，包括文本颜色、背景颜色、边框颜色、渐变色以及占位符颜色。

与其它变体结合使用

dark 变体可以与响应式变体和状态变体结合使用：

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>

为了使其正常工作，您必须把响应式变体要在最前面，然后是 dark 变体，最后是状态变体。

为其它功能类启用深色模式

要想为其它功能启用 dark 变体，把 dark 添加到您想要启用的任何功能的变体列表中。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

默认情况下，dark 变体只对 backgroundColor、borderColor、gradientColorStops、placeholderColor 和 textColor 启用。

手动切换深色模式

如果要支持手动切换深色模式而不是依赖于操作系统首选项，请使用 class 策略代替 media 策略：

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

现在，dark:{class} 类将不再根据 prefers-color-scheme 起作用，而是当在 HTML 树中出现 dark 类时起作用。

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

如何将 dark 类添加到 html 元素中取决于您，但是一种常见的方式是使用 JS 从某个地方（如 localStorage）读取首选项并相应的更新 DOM。

这是一个简单的示例，说明如何支持浅色模式、深色模式，以及如何遵守操作系统的首选项。

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.querySelector('html').classList.add('dark')
} else {
  document.querySelector('html').classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

同样，您可以根据自己的喜好进行管理，甚至可以将偏好存储在服务端数据库中并在服务器上渲染出相应的类，这完全取决于您。

与其它变体结合使用

为其它功能类启用深色模式

手动切换深色模式

本页目录