Tailwind CSS - 深色模式
深色模式 是许多操作系统中的一项功能，它将屏幕的配色方案更改为较暗的色调。在低光条件下，它能提升可见度，并提供比传统明亮主题更温和的观看体验。
Tailwind CSS 简化了在网站上实现深色模式的过程。它提供了内置的 dark mode variant，让你可以轻松为明亮和深色主题设计网站样式。
你可以使用 Tailwind 的 dark variant 为深色模式定义特定样式，确保你的网站在明亮和深色环境中都呈现出色。
示例
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 p-4">
<div class="grid grid-cols-2 gap-6">
<!-- 明亮模式卡片 -->
<div class="bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-xl font-semibold mb-2 text-gray-800">
明亮模式
</h2>
<p class="text-gray-600">
这是卡片的明亮模式版本。
背景为白色，文本为
灰色调，提供干净明亮的
外观。
</p>
</div>
<!-- 深色模式卡片 -->
<div class="bg-gray-900 p-6 rounded-lg shadow-xl">
<h2 class="text-xl font-semibold mb-2 text-gray-100">
深色模式
</h2>
<p class="text-gray-400">
这是卡片的深色模式版本。
背景为深灰色，文本
为较浅色调，便于在低光条件下阅读。
</p>
</div>
</div>
</body>
</html>
此示例展示了卡片组件在明亮模式和深色模式下的外观，并排显示。明亮模式卡片具有白色背景和深色文本，而深色模式卡片具有深色背景和较浅文本，便于阅读。
使用 Tailwind CSS 手动切换深色模式
要在 Tailwind CSS 项目中手动控制深色模式，你可以使用 "selector" 策略，而不是依赖系统的默认设置来处理深色模式。配置方法如下。
在你的 tailwind.config.js 文件中，按以下方式设置深色模式：
module.exports = {
darkMode: 'selector',
// ...
}
通过此设置，当元素上存在特定 class（例如 dark）时，深色模式样式才会应用，而不是依赖用户的系统设置。
示例：未启用深色模式
<html>
<body>
<!-- 这将是白色 -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
示例：启用深色模式
<html class="dark">
<body>
<!-- 这将是黑色 -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
如果你在 Tailwind 配置 中使用了 prefix，请确保将其应用到 deep mode class 上。例如，使用 tw- 前缀时，应使用 tw-dark 来激活深色模式。此外，为了管理 deep class 的应用时机，你可以使用 JavaScript 检查用户偏好（例如从 localStorage 获取）并相应更新 HTML。
自定义深色模式选择器
在某些框架中，深色模式的处理方式不同，使用独特的类名或方法。Tailwind CSS 允许你通过在配置文件中定义自定义选择器来自定义深色模式的应用方式。
你可以通过将 darkMode 配置为数组来设置自定义选择器，如下所示：
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['selector', '[data-mode="dark"]'],
// ...
}
Tailwind 会用 :where() 伪类包裹你的自定义选择器，以确保其优先级与默认的基于媒体查询的策略匹配。
.dark\:underline:where([data-mode="dark"], [data-mode="dark"] *) {
text-decoration-line: underline;
}
同时支持系统偏好和手动选择
你可以使用选择器策略同时支持系统偏好和手动主题切换。此示例展示了如何使用 localStorage 和 window.matchMedia() API 来管理主题。
// 在页面加载时检查并应用主题
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 的默认 变体，你可以在 tailwind.config.js 文件中自定义它。要设置自定义深色模式变体，请使用以下配置。
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['variant', '&:not(.light *)'],
// ...
}
使用此方法，Tailwind 不会更改你提供的选择器。因此，请注意其优先级，并考虑使用 :where() 伪类来匹配其他 Tailwind 实用类的优先级。
使用多个选择器
如果你需要适应不同启用深色模式的场景，可以在配置文件中以数组形式指定多个选择器。
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['variant', [
'@media (prefers-color-scheme: dark) { &:not(.light *) }',
'&:is(.dark *)',
]],
// ...
}
此配置允许你通过指定多个选择器来处理各种深色模式用例。