今天是連假第一天,返鄉的看官們都平安吧!前幾天蘋果發表了 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 自帶主題
不過還沒結束,我們要讓 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>
在默認情況下,深色模式只對
backgroundColor
、borderColor
、gradientColorStops
、placeholderColor
和textColor
起作用,目前對威爾豬來說夠用了,不需再額外添加。
顧名思義,讓使用者想自由切換為深色模式或是淺色模式,通常會使用到 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 ~