Tailwind CSS 深色模式

2022-07-26 11:00 更新

深色模式

使用 Tailwind CSS 在深色模式下为您的网站设置样式。

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

为了使此操作尽可能简单，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.documentElement.classList.add('dark')
} else {
  document.documentElement.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')

同样，您可以随心所欲地管理它，甚至将首选项服务器端存储在数据库中并在服务器上呈现类 - 这完全取决于您。

特异性考虑

使用 class 策略时，dark 模式实用程序的特异性将高于常规实用程序，因为选择器包含一个额外的类。这意味着在某些情况下，某些实用程序组合的行为在 class 模式下可能与在 media 模式下略有不同。

例如，考虑这个 HTML：

<div class="text-black text-opacity-50 dark:text-white">
  <!-- ... -->
</div>

使用媒体策略时，dark:text-white 与 text-black 和 text-opacity-50 具有相同的特异性。因为 text-opacity-50 在生成的 CSS 中比 dark:text-white 定义得晚，所以白色文本将具有 50% 的不透明度。

当使用 class 策略时，dark:text-white 具有更高的特异性，因此即使它被定义得更早，它实际上也会覆盖 text-opacity-50 并将不透明度重置回 1。所以当使用 class 策略时，你'需要在 dark 模式下重新指定不透明度：

<div class="text-black text-opacity-50 dark:text-white dark:text-opacity-50">
  <!-- ... -->
</div>

以上内容是否对您有帮助：

← Tailwind CSS 悬停、焦点和其他状态

Tailwind CSS 添加基础样式 →

写笔记

我要补充