12. 深色模式：dark 策略

本节目标：掌握两种深色模式策略——自动跟随系统和手动切换，能实现一个带开关的深色模式切换功能。

Tailwind 的 dark: 前缀让你可以轻松为同一个元素定义亮色和暗色两套样式。

基本用法

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  <h3>标题</h3>
  <p>内容文字</p>
</div>

亮色模式：白底黑字
深色模式：深灰底白字

策略一：跟随系统（默认）

默认情况下，dark: 样式通过 prefers-color-scheme 媒体查询生效。用户在操作系统里开了深色模式，网页自动切换。

不需要任何额外配置，开箱即用。

策略二：手动切换（class 策略）

如果你想让用户自己点按钮切换，不管系统设置，用 @custom-variant 覆盖默认行为：

@import "tailwindcss";

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

然后在 HTML 的根元素上加 dark 类：

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      这个 div 现在是深色背景
    </div>
  </body>
</html>

去掉 class="dark" 就回到亮色模式。

策略三：data-attribute

类似 class 策略，但用 data 属性：

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

<html data-theme="dark">
  <!-- dark: 样式生效 -->
</html>

好处是不会跟其他 class 冲突，语义也更清晰。

完整的三向切换实现

支持”亮色 / 深色 / 跟随系统”三种选择：

// 页面加载时
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && 
     window.matchMedia("(prefers-color-scheme: dark)").matches)
);

// 用户选择亮色
function setLight() {
  localStorage.theme = "light";
  document.documentElement.classList.remove("dark");
}

// 用户选择深色
function setDark() {
  localStorage.theme = "dark";
  document.documentElement.classList.add("dark");
}

// 用户选择跟随系统
function setSystem() {
  localStorage.removeItem("theme");
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
}

注意事项

不要同时用两种策略。@custom-variant dark 会覆盖默认的 prefers-color-scheme，选了手动切换就别指望自动跟随。

避免 FOUC（Flash of Unstyled Content）。如果用 JavaScript 切换，把切换逻辑放在 <head> 里内联执行，避免页面渲染完再闪一下。

图片也要处理。深色模式下可能需要换图片或用 CSS 降低亮度：

<img class="dark:opacity-80 dark:grayscale" src="..." />

Tip

设计深色模式时，不要简单地把颜色反转。纯黑 #000 对比度太高，用 gray-800、gray-900 这种深灰更舒服。

下一章我们学 Preflight。