Lzh on GitHub

夜间模式

使用变体来设置你的网站在夜间模式下的样式。

概述

既然夜间模式已成为许多操作系统的原生特性，那么设计一个与默认设计相搭配的网站深色版本也变得越来越普遍。

为了尽可能简化这一点，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>

默认情况下，这使用 prefers-color-scheme CSS 媒体特性，但你也可以通过覆盖 dark 变体来构建支持 手动切换夜间模式 的网站。

手动切换暗模式

如果你希望你的深色主题由 CSS 选择器驱动，而不是 prefers-color-scheme 媒体查询，请覆盖 dark 变体以使用你的自定义选择器：

app.css
@import "tailwindcss";

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

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

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

如何将 dark 类添加到 html 元素取决于你，但常见的方法是使用一些 JavaScript 来更新 class 属性并将该偏好同步到 localStorage 等位置。

使用数据属性

要使用 data 属性而不是 class 来激活夜间模式，只需使用属性选择器覆盖 dark 变体：

CSS
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/dist/lib.d.mts";

@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>

支持系统主题

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

以下是如何支持浅色模式、夜间模式以及尊重操作系统偏好的简单示例：

JavaScript
// 在页面加载时或更改主题时，最好内联添加到 `<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");

同样，你可以根据自己的喜好管理此过程，甚至可以将偏好存储在服务器端的数据库中并在服务器端渲染 class——这完全取决于你。