深色模式

使用方式类似于断点，不同的是，要把:左边固定为dark，:右边同样写下你想要覆盖成的深色样式。

html

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-500 dark:text-gray-400">123</p>
</div>

默认跟随系统切换深色模式。但你也可以通过一点 JavaScript 来构建支持手动切换深色模式的网站。

正在入门的读者请先跳过本页剩余部分，以免影响最快路径学习。

手动切换深色模式

阅读这一段前，需要你先去了解一下指定样式生效的条件。

默认的 dark variant 使用 prefers-color-scheme CSS 媒体特性，要支持手动切换模式需要覆盖 tailwind 默认的判断逻辑，也就是要用咱们自己的代码来接管切换模式的功能。

你只需要在 css 文件里将 dark 变体覆盖掉。

css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));	// [!code focus]

接着使用 js 将 dark 的类名添加到 html 标签里面即可让深色模式生效。

html

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