夜间模式

概述(Overview)

¥Overview

既然夜间模式是许多操作系统的一流功能，设计网站的深色版本以配合默认设计变得越来越普遍。

¥Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design.

为了尽可能简化此操作，Tailwind 包含一个 dark 变体，可让你在启用夜间模式时以不同方式设置网站样式：

¥To make this as easy as possible, Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled:

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 媒体功能，但你也可以通过覆盖深色变体来构建支持手动切换夜间模式的站点。

¥By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually by overriding the dark variant.

手动切换夜间模式(Toggling dark mode manually)

¥Toggling dark mode manually

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

¥If you want your dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query, override the dark variant to use your custom selector:

app.css

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

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

¥Now instead of dark:* utilities being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree:

HTML

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

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

¥How you add the dark class to the html element is up to you, but a common approach is to use a bit of JavaScript that updates the class attribute and syncs that preference to somewhere like localStorage.

使用数据属性(Using a data attribute)

¥Using a data attribute

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

¥To use a data attribute instead of a class to activate dark mode, just override the dark variant with an attribute selector instead:

app.css

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

现在，只要在树的某处将 data-theme 属性设置为 dark，就会应用夜间模式工具：

¥Now dark mode utilities will be applied whenever the data-theme attribute is set to dark somewhere up the tree:

HTML

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

使用系统主题支持(With system theme support)

¥With system theme support

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

¥To build three-way theme toggles that support light mode, dark mode, and your system theme, use a custom dark mode selector and the window.matchMedia() API to detect the system theme and update the html element when needed.

这是一个简单的示例，说明如何支持亮模式、夜间模式以及尊重操作系统首选项：

¥Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference:

spaghetti.js

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// 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");

同样，你可以按照自己喜欢的方式进行管理，甚至可以将首选项服务器端存储在数据库中并在服务器上渲染该类 - 这完全取决于你。

¥Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it's totally up to you.

概述(Overview)

手动切换夜间模式(Toggling dark mode manually)

使用数据属性(Using a data attribute)

使用系统主题支持(With system theme support)

目录