核心概念
使用变体将您的网站样式设为暗黑模式。
现在，暗黑模式已成为许多操作系统的一等功能，因此设计一个与默认设计相配合的暗黑版本的网站变得越来越普遍。
为尽可能简化此操作，Tailwind 包含了一个 dark 变体，可以在启用暗黑模式时为您的网站设置不同的样式：
亮色模式
可倒着书写
零重力笔可以用于任何方向书写， 包括倒着书写。它甚至可以在外太空中使用。
暗黑模式
可倒着书写
零重力笔可以用于任何方向书写， 包括倒着书写。它甚至可以在外太空中使用。
<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 ">可倒着书写</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> 零重力笔可以用于任何方向书写，包括倒着书写。它甚至可以在外太空中使用。 </p></div>默认情况下，这使用 prefers-color-scheme CSS 媒体特征，但您也可以构建支持 手动切换暗黑模式 的网站，通过覆盖暗黑变体。
如果您希望您的暗黑主题通过 CSS 选择器驱动而不是 prefers-color-scheme 媒体查询，请覆盖 dark 变体以使用您的自定义选择器：
@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));现在，dark:* 实用程序将根据在 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` 中添加内联样式以避免 FOUCdocument.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// 当用户明确选择亮色模式时localStorage.theme = "light";// 当用户明确选择暗黑模式时localStorage.theme = "dark";// 当用户明确选择尊重操作系统偏好时localStorage.removeItem("theme");您可以根据需要管理此设置，甚至可以将偏好存储在服务器端数据库中并在服务器上渲染类 — 完全取决于您。