99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

Tailwind CSS 深色模式

2022-07-26 11:00 更新

深色模式

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

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

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

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

請(qǐng)務(wù)必注意，出于文件大小的考慮，默認(rèn)情況下，Tailwind 未開啟深色模式變體。

要啟用深色模式，請(qǐng)?jiān)?nbsp;?tailwind.config.js? 文件中把 ?darkMode ?選項(xiàng)設(shè)置為 ?media?：

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

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

默認(rèn)情況下，當(dāng) ?darkMode ?啟用時(shí)，只會(huì)為顏色相關(guān)的類生成 ?dark ?變體，包括文本顏色、背景顏色、邊框顏色、漸變色以及占位符顏色。

與其它變體結(jié)合使用

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

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

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

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

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

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

默認(rèn)情況下，?dark ?變體只對(duì) ?backgroundColor?、?borderColor?、?gradientColorStops?、?placeholderColor ?和 ?textColor ?啟用。

手動(dòng)切換深色模式

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

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

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

<!-- 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 從某個(gè)地方（如 ?localStorage?）讀取首選項(xiàng)并相應(yīng)的更新 DOM。

這是一個(gè)簡(jiǎn)單的示例，說明如何支持淺色模式、深色模式，以及如何遵守操作系統(tǒng)的首選項(xià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')

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

特異性考慮

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

例如，考慮這個(gè) HTML：

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

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

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

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


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)