Core concepts
深色模式
使用变体来为您的网站设计深色模式样式。
概述
现在深色模式已经成为许多操作系统的核心功能，为您的网站设计一个深色版本以配合默认设计变得越来越普遍。
为了使这个过程尽可能简单，Tailwind 包含了一个 dark 变体，让您可以在启用深色模式时以不同的方式设计网站样式：
Light mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
Dark mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3> <p class="text-gray-500 dark:text-gray-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>默认情况下，这会使用 CSS 媒体特性 prefers-color-scheme，但您也可以通过覆盖深色变体来构建支持手动切换深色模式的网站。
手动切换深色模式
如果您想要深色主题由 CSS 选择器驱动，而不是由 prefers-color-scheme 媒体查询驱动，可以覆盖 dark 变体以使用您的自定义选择器：
@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));现在，dark:* 工具类的应用不再基于 prefers-color-scheme，而是在 HTML 树中较早出现的地方存在 dark 类时生效：
<html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>如何将 dark 类添加到 html 元素由您决定，但常见的方法是使用一些 JavaScript 代码来更新 class 属性，并将该偏好同步到类似 localStorage 的地方。
使用数据属性
要使用数据属性而不是类来激活深色模式，只需使用属性选择器来覆盖 dark 变体：
@import "tailwindcss";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));现在，当树中某处的 data-theme 属性设置为 dark 时，深色模式工具类就会生效：
<html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>支持系统主题
要构建支持浅色模式、深色模式和系统主题的三向主题切换，使用自定义深色模式选择器和 window.matchMedia() API 来检测系统主题并在需要时更新 html 元素。
以下是一个简单示例，展示如何同时支持浅色模式、深色模式以及尊重操作系统偏好：
// 页面加载或主题改变时，最好内联在 `head` 中以避免闪烁document.documentElement.classList.toggle( "dark", localStorage.currentTheme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// 当用户明确选择浅色模式时localStorage.currentTheme = "light";// 当用户明确选择深色模式时localStorage.currentTheme = "dark";// 当用户明确选择遵循操作系统偏好时localStorage.removeItem("theme");同样，您可以随意管理这个过程，甚至可以将偏好存储在服务器端的数据库中并在服务器端渲染类 —— 这完全由您决定。
