Tailwind CSS - 深色模式

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

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

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

示例

Open Compiler

<!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来激活深色模式。此外，为了管理何时应用 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;
}

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

同时支持系统首选项和手动选择

您可以使用选择器策略来同时支持系统首选项和手动主题切换。此示例显示了如何使用localStorage和window.matchMedia() API 来管理主题。

// Check and apply the theme on page load
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');
}

// To set light mode
localStorage.theme = 'light';

// To set dark mode
localStorage.theme = 'dark';

// To respect the OS preference
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 *)',
    ]],
    // ...
}

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

打印页面