黑暗模式

概述

现在黑暗模式是许多操作系统的一个重要特性，因此为您的网站设计黑暗版本变得越来越普遍，以与默认设计相匹配。

为了尽可能简化这一过程，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 变体以使用您的自定义选择器：

app.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

现在，而不是基于 prefers-color-scheme 应用 dark:* 工具，当 dark 类在 HTML 树中较早出现时，它们将被应用：

HTML

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

如何将 dark 类添加到 html 元素取决于您，但一种常见的方法是使用少量 JavaScript 更新 class 属性，并将该首选项同步到 localStorage。

使用数据属性

要使用数据属性而不是类来激活黑暗模式，只需使用属性选择器覆盖 dark 变体即可：

app.css

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

现在，只要在树的某个地方将 data-theme 属性设置为 dark，黑暗模式实用工具将应用：

HTML

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

使用系统主题支持

要构建支持亮色模式、黑暗模式和系统主题的三方主题切换器，请使用自定义黑暗模式选择器和 window.matchMedia() API 来检测系统主题并在需要时更新 html 元素。

以下是一个简单示例，展示如何支持亮色模式、黑暗模式，以及尊重操作系统的首选项：

spaghetti.js

// 在页面加载时或更改主题时，最好将其内联添加到 `head` 以避免 FOUC
document.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");

您可以根据需要自行管理这一切，甚至可以在服务器端数据库中存储首选项，并在服务器上渲染类——这完全取决于您。

概述

手动切换黑暗模式

使用数据属性

使用系统主题支持

目录