深色模式
使用Tailwind CSS为您的网站添加深色模式样式。
基本用法
现在，深色模式已成为许多操作系统的一流功能，设计一个与默认设计相配套的网站深色版本变得越来越普遍。
为了尽可能简单，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-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>默认情况下，这使用 prefers-color-scheme CSS 媒体功能，但您也可以构建支持手动切换暗模式的站点，使用“选择器”策略。
手动切换暗黑模式
如果您想手动支持切换暗模式，而不是依赖操作系统偏好，请使用 selector 策略而不是 media 策略：
在 Tailwind CSS v3.4.1 中，
selector策略取代了class策略。
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
// ...
}现在，不再基于 prefers-color-scheme 应用类，而是在 HTML 树中较早出现 dark 类时应用类。
<!-- 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 元素取决于你，但常见的方法是使用一些 JavaScript 代码，从某个地方（比如 localStorage ）读取偏好设置，并相应地更新 DOM。
定制选择器
一些框架（如 NativeScript）有自己的方法来启用深色模式，并在深色模式激活时添加不同的类名。
您可以通过将 darkMode 设置为包含自定义选择器的数组的第二项来自定义暗模式选择器：
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
// ...
}Tailwind 将自动使用 :where() 伪类来包装您的自定义暗模式选择器，以确保其特异性与使用 media 策略时相同。
.dark\:underline:where([data-mode="dark"], [data-mode="dark"] *){
text-decoration-line: underline
}支持系统偏好和手动选择
selector 策略可以通过使用 window.matchMedia() API 来支持用户系统偏好或手动选择的模式。
这里有一个简单的示例，说明如何支持浅色模式、深色模式，并尊重操作系统的偏好设置：
// 在页面加载或更换主题时，最好在 `head` 中内嵌添加，以避免 FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
// 每当用户明确选择浅色模式时
localStorage.theme = 'light'
// 每当用户明确选择深色模式时
localStorage.theme = 'dark'
// 每当用户明确选择尊重操作系统的偏好时
localStorage.removeItem('theme')你可以按照自己的喜好进行管理，甚至可以将偏好存储在服务器端的数据库中，并在服务器上渲染类 — 这完全取决于你。
覆盖暗黑变体
如果您想用自定义的变体替换Tailwind内置的暗色变体，您可以使用 variant 暗模式策略：
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['variant', '&:not(.light *)'],
// ...
}使用这种策略时，Tailwind 不会以任何方式修改提供的选择器，因此请注意其特异性，并考虑使用伪类来确保它具有与其他实用程序相同的特异性。
使用多个选择器
如果您有多种情景需要启用暗模式，您可以通过提供一个数组来指定所有这些情景：
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['variant', [
'@media (prefers-color-scheme: dark) { &:not(.light *) }',
'&:is(.dark *)',
]],
// ...
}