Tailwind CSS 深色模式

2022-07-26 11:00 更新

深色模式

使用 Tailwind CSS 在深色模式下為您的網(wǎng)站設置樣式。

現(xiàn)在深色模式是很多操作系統(tǒng)的首要功能，設計一個深色版的網(wǎng)站來配合默認的設計變得越來越普遍。

為了使此操作盡可能簡單，Tailwind 包含一個 ?dark ?變體，當啟用深色模式時，您可以為您的網(wǎng)站設置不同的樣式：

<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? 文件中把 ?darkMode ?選項設置為 ?media?：

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

現(xiàn)在，只要用戶的操作系統(tǒng)開啟了深色模式，?dark:{class}? 類將優(yōu)先于無前綴的類。?media ?策略在底層使用 ?prefers-color-scheme? 媒體功能，但是，如果您想支持手動切換深色模式，您也可以 使用 ‘class’ 策略 進行更多控制。

默認情況下，當 ?darkMode ?啟用時，只會為顏色相關的類生成 ?dark ?變體，包括文本顏色、背景顏色、邊框顏色、漸變色以及占位符顏色。

與其它變體結合使用

dark 變體可以與響應式變體和狀態(tài)變體結合使用：

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

為了使其正常工作，您必須把響應式變體要在最前面，然后是 ?dark ?變體，最后是狀態(tài)變體。

為其它功能類啟用深色模式

要為其他實用程序啟用 ?dark ?變體，請將 ?dark ?變體添加到您想要啟用它的任何實用程序的變體列表中：

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

默認情況下，?dark ?變體只對 ?backgroundColor?、?borderColor?、?gradientColorStops?、?placeholderColor ?和 ?textColor ?啟用。

手動切換深色模式

如果要支持手動切換深色模式而不是依賴于操作系統(tǒng)首選項，請使用 ?class ?策略代替 ?media ?策略：

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

現(xiàn)在，?dark:{class}? 類將不再根據(jù) ?prefers-color-scheme? 起作用，而是當在 HTML 樹中出現(xiàn) ?dark ?類時起作用。

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

這是一個簡單的示例，說明如何支持淺色模式、深色模式，以及如何遵守操作系統(tǒng)的首選項。

// 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')

同樣，您可以隨心所欲地管理它，甚至將首選項服務器端存儲在數(shù)據(jù)庫中并在服務器上呈現(xiàn)類 - 這完全取決于您。

特異性考慮

使用 ?class ?策略時，dark 模式實用程序的特異性將高于常規(guī)實用程序，因為選擇器包含一個額外的類。這意味著在某些情況下，某些實用程序組合的行為在 ?class ?模式下可能與在 ?media ?模式下略有不同。

例如，考慮這個 HTML：

<div class="text-black text-opacity-50 dark:text-white">
  <!-- ... -->
</div>

使用媒體策略時，?dark:text-white? 與 ?text-black? 和 ?text-opacity-50? 具有相同的特異性。因為 ?text-opacity-50? 在生成的 CSS 中比 ?dark:text-white? 定義得晚，所以白色文本將具有 50% 的不透明度。

當使用 ?class ?策略時，?dark:text-white? 具有更高的特異性，因此即使它被定義得更早，它實際上也會覆蓋 ?text-opacity-50? 并將不透明度重置回 1。所以當使用 ?class ?策略時，你'需要在 dark 模式下重新指定不透明度：

<div class="text-black text-opacity-50 dark:text-white dark:text-opacity-50">
  <!-- ... -->
</div>

以上內(nèi)容是否對您有幫助：

← Tailwind CSS 懸停、焦點和其他狀態(tài)

Tailwind CSS 添加基礎樣式 →

寫筆記

我要補充