Tailwind CSS - 暗黑模式

暗黑模式是许多操作系统中的一项功能，可将屏幕的配色方案更改为较暗的色调。与传统的明亮主题相比，它可以提高弱光条件下的可视性，并提供更柔和的观看体验。

Tailwind CSS 简化了在您的网站上实现暗黑模式的过程。它提供了内置的暗黑模式变体，让您可以轻松地为亮黑主题设置网站样式。

您可以使用Tailwind 的 Dark 暗黑变体为暗黑模式定义特定的样式，确保您的网站在亮黑和暗黑环境下都拥有出色的显示效果。

示例

<!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">
        <!-- Light Mode Card -->
        <div class="bg-white p-6 rounded-lg shadow-xl">
            <h2 class="text-xl font-semibold mb-2 text-gray-800">
                Light Mode
            </h2>
            <p class="text-gray-600">
                This is the light mode version of the card. 
                The background is white, and the text is in 
                shades of gray, offering a clean and bright 
                appearance.
            </p>
        </div>
        <!-- Dark Mode Card -->
        <div class="bg-gray-900 p-6 rounded-lg shadow-xl">
            <h2 class="text-xl font-semibold mb-2 text-gray-100">
                Dark Mode
            </h2>
            <p class="text-gray-400">
                This is the dark mode version of the card. 
                The background is dark gray, and the text 
                is in lighter shades, making it easier to 
                read in low-light conditions.
            </p>
        </div>
    </div>
</body>

</html>

此示例展示了卡片组件在亮色模式和暗色模式下并排显示的效果。亮色模式卡片采用白色背景和深色文本，而暗色模式卡片采用深色背景和浅色文本，以便于阅读。

使用 Tailwind CSS 手动切换暗色模式

要在 Tailwind CSS 项目中手动控制暗色模式，您可以使用"选择器"策略，而不是依赖系统默认的暗色模式设置。配置方法如下。

在您的 tailwind.config.js 文件中，按如下方式设置暗黑模式:

module.exports = {
    darkMode: 'selector',
    // ...
}

使用此设置，当元素上存在特定类(例如 dark)时，暗黑模式样式将应用，而不是取决于用户的系统设置。

示例:不使用暗黑模式

<html>
<body>
    <!-- This will be white -->
    <div class="bg-white dark:bg-black">
        <!-- ... -->
    </div>
</body>

</html>

示例:启用黑暗模式

<html class="dark">
<body>
    <!-- This will be black -->
    <div class="bg-white dark:bg-black">
        <!-- ... -->
    </div>
</body>
</html>

如果您在 Tailwind 配置 中使用前缀，请务必将其应用于暗黑模式类。例如，如果前缀为 tw-，则应使用 tw-dark 来激活暗黑模式。此外，要管理暗黑类的应用时间，您可以使用 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 *)',
    ]],
    // ...
}

此配置允许您通过指定多个选择器来处理各种暗模式用例。