Tailwind CSS on GitHub

暗黑模式

使用Tailwind CSS为你的网站打造暗黑模式。

基本用法

现在暗模式已经成为许多操作系统的头等功能,因此按照默认设计来设计暗版本的网站也变得越来越普遍。

为了使这变得尽可能简单,Tailwind包含了一个dark变体,当启用黑色模式时,你可以用不同的风格来设计你的网站:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

需要格外注意的是,由于文件大小的考虑,默认情况下,Tailwind不启用暗模式变体。

你可以在配置文件tailwind.config.js中设置darkModemedia来启用:

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

现在,只要在用户的操作系统上启用了dark模式,dark:{class}类将优先于没有前缀的类。media模式依赖prefers-color-scheme媒体功能,但如果你想支持手动切换暗模式,你也可以使用“class”模式进行更多的控制。

默认情况下,当darkMode启用时,只会为与颜色相关的类生成暗变量,这些类包括文本颜色、背景颜色、边框颜色、渐变和占位符颜色。


与其他变体叠加

dark可以跟响应式前缀以及其他变体叠加:

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>

响应式前缀必须在第一位,然后是dark,最后是其他变体。


为其他工具类开启

要开启dark,方法跟其他变体一样,在配置文件添加即可:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

默认情况下,dark只开启了backgroundColorborderColorgradientColorStopsplaceholderColortextColor


手动切换

如果你想支持手动切换暗模式而不是依赖于操作系统的偏好,使用class模式而不是media模式:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

现在,当dark类出现在html标签时,它们就会被应用,而不是根据首选色方案应用dark:{class}类。

<!-- 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>

如何将dark类添加到html元素取决于你,但一种常见的方法是使用一些JS从某处读取配置项(如localStorage)并相应地更新DOM。

这里有一个简单的例子,你可以支持light模式,dark模式,以及遵循操作系统的偏好:

// On page load or when changing themes, best to add inline in `head` to avoid 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')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

同样,你可以按照自己喜欢的方式进行管理,甚至可以将配置项存储在数据库中,并在服务器上呈现类——这完全取决于你。