tailwind 的 dark mode 默認(rèn)是關(guān)閉的，需手動配置啟用。你可在 tailwind.config.JS 中設(shè)置 darkmode 選項，選擇 class 模式或 media 查詢模式：1. class 模式（darkmode: ‘class’）更靈活，通過添加 dark 類控制 dark mode；2. media 查詢模式（darkmode: ‘media’）更簡單，自動根據(jù)系統(tǒng)主題應(yīng)用樣式。使用時可通過 dark: 前綴定義暗色樣式，如 bg-white dark:bg-gray-800。圖片顏色反轉(zhuǎn)問題可用 css 濾鏡或?qū)Ｓ冒瞪珗D片解決。用戶是否開啟 dark mode 可通過 window.matchmedia 檢測系統(tǒng)主題或根據(jù)偏好設(shè)置動態(tài)控制。選擇哪種模式取決于項目需求與個人偏好。
選擇Tailwind的dark mode策略，其實就是在class模式和media查詢模式之間做個權(quán)衡。前者更靈活，后者更簡單。
class模式和media查詢模式各有千秋，最終選擇哪個，取決于你的項目需求和個人偏好。如果你需要更精細的控制，或者你的用戶有自定義主題的需求，class模式更適合你。如果你的項目比較簡單，或者你更喜歡開箱即用的體驗，media查詢模式會讓你更省心。
Tailwind dark mode 默認(rèn)是開啟還是關(guān)閉的？
默認(rèn)情況下，Tailwind 的 dark mode 是關(guān)閉的。你需要手動配置才能啟用它。這其實是個挺好的設(shè)計，避免了不必要的樣式?jīng)_突，讓你有充分的掌控權(quán)。開啟的方法很簡單，在 tailwind.config.js 文件中，你需要配置 darkMode 選項。有兩種配置方式，分別對應(yīng) class 模式和 media 查詢模式。
- Class 模式: darkMode: ‘class’。這種模式下，你需要手動在 html 標(biāo)簽上添加 dark 類來啟用 dark mode。
- Media 查詢模式: darkMode: ‘media’。這種模式下，Tailwind 會自動檢測用戶的系統(tǒng)主題，并根據(jù)系統(tǒng)主題來應(yīng)用 dark mode 樣式。
我個人更喜歡 class 模式，因為它更靈活，可以讓我更精確地控制 dark mode 的行為。比如，我可以根據(jù)用戶的偏好設(shè)置來動態(tài)切換 dark mode，而不是僅僅依賴于系統(tǒng)主題。
如何在 Tailwind 中使用 dark mode？
使用 dark mode 的方式也很直接。在你的 HTML 元素上，你可以使用 dark: 前綴來定義 dark mode 下的樣式。例如，bg-white dark:bg-gray-800 表示在 light mode 下背景色是白色，在 dark mode 下背景色是灰色。
<div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200"> Hello, world! </div>
這段代碼定義了一個 div 元素，在 light mode 下，背景色是白色，文字顏色是灰色；在 dark mode 下，背景色是灰色，文字顏色是白色。 這種方式非常直觀，而且可以讓你輕松地為不同的元素定義不同的 dark mode 樣式。
dark mode 下圖片顏色反轉(zhuǎn)問題如何解決？
在 dark mode 下，圖片顏色反轉(zhuǎn)可能會導(dǎo)致視覺效果不佳。一個簡單的解決方法是使用 css 濾鏡來調(diào)整圖片的顏色。你可以使用 Filter: invert(1) 來反轉(zhuǎn)圖片的顏色，或者使用其他的濾鏡來調(diào)整圖片的亮度、對比度等。
@@##@@
當(dāng)然，更好的做法是為 dark mode 提供專門的圖片資源。這樣可以保證在 dark mode 下圖片的視覺效果最佳。例如，你可以為 light mode 和 dark mode 分別提供不同版本的 logo。
如何檢測用戶是否開啟了 dark mode？
如果你使用的是 media 查詢模式，Tailwind 會自動檢測用戶的系統(tǒng)主題。如果你使用的是 class 模式，你需要手動檢測用戶是否開啟了 dark mode。你可以使用 JavaScript 來檢測用戶的系統(tǒng)主題，或者使用用戶的偏好設(shè)置來判斷是否開啟 dark mode。
// 檢測系統(tǒng)主題 const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; // 根據(jù)系統(tǒng)主題設(shè)置 dark mode if (prefersDarkMode) { document.documentElement.classList.add('dark'); }
這段代碼使用 window.matchMedia 來檢測用戶的系統(tǒng)主題。如果用戶開啟了 dark mode，prefersDarkMode 的值為 true，然后我們就可以在 HTML 標(biāo)簽上添加 dark 類來啟用 dark mode。
