TailwindCSS：深色模式与主题色
<https://www.tailwindcss.cn/docs/dark-mode>
Dark Mode
使用 Tailwind CSS 在深色模式下设计您的网站。基本用法现在，深色模式是许多操作系统的一流功能，设计网站的深色版本以配合默认设计变得越来越普遍。为了使这一过程尽可能简单，Tailwind 提供了一个深色变体，可让您在启用深色模式时以不同的方式设计网站：
html
<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
<div>
<span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
<svg
class="h-6 w-6 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
></svg>
</span>
</div>
<h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">
Writes Upside-Down
</h3>
<p class="text-slate-500 dark:text-slate-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>默认情况下，这使用偏好颜色方案 CSS 媒体功能，但您也可以使用“类”策略构建支持手动切换深色模式的网站。
手动切换深色模式
如果您想支持手动切换深色模式而不是依赖操作系统首选项，请使用类策略而不是媒体策略：
js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
// ...
}现在，不再是基于首选颜色方案应用 dark:{class} 类，而是只要 HTML 树中较早出现深色类，就会应用它们。
html
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>如果您在 Tailwind 配置中设置了前缀，请务必将其添加到 dark 类中。例如，如果您有 tw- 前缀，则需要使用 tw-dark 类来启用深色模式。如何将 dark 类添加到 html 元素取决于您，但常见的方法是使用一些 JS 从某处（例如 localStorage）读取首选项并相应地更新 DOM。
支持系统偏好和手动选择
类策略可用于支持用户的系统首选项或通过使用 Window.matchMedia() API 手动选择的模式。这是一个简单的示例，说明如何支持浅色模式、深色模式以及尊重操作系统首选项：
同样，您可以按照自己喜欢的方式进行管理，甚至可以将首选项服务器端存储在数据库中并在服务器上呈现该类 - 这完全取决于您。
自定义类名
某些框架（如 NativeScript）有自己的方法来启用暗模式，并在暗模式处于活动状态时添加不同的类名。您可以通过将 darkMode 设置为数组并将自定义选择器作为第二项来自定义深色模式选择器名称：
js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class', '[data-mode="dark"]'],
// ...
}