Tailwind CSS - 暗黑模式

原创

admin 4个月前 (08-07) 阅读数 21 #CSS

Tailwind CSS - 暗黑模式

暗黑模式是许多操作系统中的一个功能，它会将屏幕的颜色方案更改为较深的色调。它在低光条件下提高了可见性，与传统的明亮主题相比，提供了更柔和的观看体验。

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

您可以使用 Tailwind 的暗黑模式变体为暗黑模式定义特定的样式，这确保您的网站在亮色和暗色设置下看起来都很棒。

示例

<!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 项目中手动控制暗黑模式，您可以使用"选择器"策略，而不是依赖系统默认设置来处理暗黑模式。以下是配置方法。

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

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

使用此设置，当元素上存在特定类（例如 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 配置中使用前缀，请确保将其应用于暗黑模式类。例如，使用 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 *)',
    ]],
    // ...
}

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