iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

初見 Tailwindcss系列 第 18

Day 18 - Dark Mode 使用

今天是連假第一天,返鄉的看官們都平安吧!前幾天蘋果發表了 New iPhone,售價降低了,加上今年又有五倍券,雖然沒啥新意,且威爾豬自己的還頭好壯壯,但折扣下來的價格跟往常比還是好誘人啊,各位看官們會想買 iPhone 13 (pro) 嗎?

深色模式

自從蘋果推出深色主題後,就受到不少眾人喜愛,威爾豬自己也是在深色主題下工作的,既能讓耗電量減少,也能增加螢幕壽命,更能讓長期在電腦面前的工作者們,降低視覺疲勞。所以現在不管是桌機還手機,深色主題是很多系統的主要功能,設計一個深色版的網站也變得越來越普遍。

身為現代 CSS 框架之一的 Tailwind,當然也具備這項能力,不過出於文件大小的考慮,在默認情況下,Tailwind 是沒有開啟深色模式的。威爾豬就來教你,如何使用隱藏版深色模式, Let's Go~

首先,開起深色模式有兩種方式,完全取決於當初專案設計時是要讓使用者 自動切換 還是 手動切換

自動切換

先來說說自動切換吧,沒聽錯,就是自動。什麼是自動切換呢?就是跟隨使用者預設的系統主題。像威爾豬使用的 macOS 和 iOS,分為淺色和深色,當使用者將系統更改為深色主題時,Tailwind 就會自動將你開發的網頁轉為深色模式;亦或是系統啟用自動,在太陽下山時,系統就會自動轉變為深色主題。也就是白天開啟網站為淺色配置,晚上開起同一網站就變為深色配置了。那 Tailwind 該如何啟用自動配置:

首先在 tailwind.config.js 中把 darkMode 設置為 media,如下:

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'media',
  ...
}

沒錯,這樣就啟動深色模式了。media 就是在底層使用了 CSS 的 prefers-color-scheme 來監測淺色或深色主題。現在,只要使用者的操作系統開啟了深色主題,那 Tailwind 編寫的網頁就會轉為深色模式了。

macOS 自帶主題
https://ithelp.ithome.com.tw/upload/images/20210918/20141250GAO1PTD3NR.png

不過還沒結束,我們要讓 Tailwind 知道轉為深色模式時要用什麼配色,使用方式為 dark:{class}。看以下範例:

<html>
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">自動深色模式</h1>
    </div>
  </body>
</html>

在默認情況下,深色模式只對 backgroundColorborderColorgradientColorStopsplaceholderColortextColor 起作用,目前對威爾豬來說夠用了,不需再額外添加。

手動切換

顧名思義,讓使用者想自由切換為深色模式或是淺色模式,通常會使用到 JavaScript 來完成觸發條件。如果要支持手動切換為深色模式,則將 media 替換為 class。範例如下:

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'class',
  ...
}

這樣,深色模式將不再根據 prefers-color-scheme 起作用,而是當在 HTML DOM 元素中指定 Class 為 dark 時才啟用。看以下範例:

<html class="dark">
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">手動深色模式</h1>
    </div>
  </body>
</html>

至於如何將 dark 添加到 HTML DOM元素中取決於當初專案的決定,但是常見的方式是使用 JavaScript (如:localStorage)來讀取,並更新相對應的顏色。

威爾豬做了一個手動版小範例,可以查看 DEMO

最後特別要注意,如果有響應式跟狀態串接時,必須把 RWD 放在最前面,然後是 dark,最後才是狀態。例如:md:dark:hover:bg-blue-300

以上就是今天的內容,深色模式是不是很酷,雖然是中秋假期,但咱們還是明天見。See you ~


上一篇
Day 17 - SVG 使用
下一篇
Day 19 - 寫一個含狀態的 Button
系列文
初見 Tailwindcss30

尚未有邦友留言

立即登入留言