Tailwind CSS 主页
  1. 核心概念
  2. 暗黑模式

基本用法

现在，深色模式已成为许多操作系统的首选功能，因此，在默认设计的基础上设计网站的深色版本变得越来越普遍。

为了尽可能简化操作，Tailwind 包含一个 dark 变体，允许您在启用深色模式时以不同的方式对网站进行样式设置。

浅色模式

颠倒书写

零重力笔可以在任何方向书写，包括倒置。它甚至可以在外太空使用。

深色模式

颠倒书写

零重力笔可以在任何方向书写，包括倒置。它甚至可以在外太空使用。 

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

默认情况下，它使用 prefers-color-scheme CSS 媒体功能，但您也可以构建支持手动切换深色模式的网站，方法是使用 “选择器”策略。

手动切换深色模式

如果您想支持手动切换深色模式，而不是依赖操作系统偏好，请使用 selector 策略，而不是 media 策略。

selector 策略在 Tailwind CSS v3.4.1 中取代了 class 策略。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  // ...
}

现在，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>

如果您在 Tailwind 配置中设置了 前缀，请确保将其添加到 dark 类中。例如，如果您有一个 tw- 前缀，则需要使用 tw-dark 类来启用深色模式。

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

自定义选择器

一些框架（如 NativeScript）有自己的启用暗模式的方法，并在暗模式激活时添加不同的类名。

您可以通过将darkMode 设置为包含自定义选择器作为第二个项目的数组来自定义暗模式选择器

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

Tailwind 会自动将您的自定义暗模式选择器包装在:where() 伪类中，以确保其特异性与使用media 策略时相同

.dark\:underline:where([data-mode="dark"], [data-mode="dark"] *){
  text-decoration-line: underline
}

支持系统偏好和手动选择

selector 策略可用于支持用户的系统偏好或手动选择的模式，方法是使用window.matchMedia() API。

以下是一个简单的示例，说明如何支持亮模式、暗模式以及尊重操作系统偏好

spaghetti.js
// 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')

同样，您可以根据自己的喜好管理它，甚至将首选项存储在服务器端数据库中并在服务器上渲染类——完全取决于您。

覆盖暗色变体

如果您想用自己的自定义变体替换 Tailwind 的内置暗色变体，可以使用variant 暗模式策略

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['variant', '&:not(.light *)'],
  // ...
}

使用此策略时，Tailwind 不会以任何方式修改提供的选择器，因此请注意其特异性，并考虑使用 `:where()` 伪类来确保它与其他实用程序具有相同的特异性。

使用多个选择器

如果您有多种需要启用深色模式的场景，可以通过提供数组来指定所有场景。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['variant', [
    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
    '&:is(.dark *)',
  ]],
  // ...
}