Tailwind CSS 關燈模式
📢 Tailwind CSS 系列文章共 3 篇，此篇為第 2 篇
📝 Tailwind基礎可參考這篇：Tailwind CSS 介紹與實作
📋 目錄
關燈模式說明
關燈(深色)模式是很多操作系統的重要功能，設計一個深色版的網站來配合默認的設計變得越來越普遍。為了使此操作盡可能簡單，Tailwind 包含一個 dark 變體，當啟用關燈模式時，可以為網站設置不同的樣式。
💡 關燈模式可以參考 Tailwind 官方文件
[實作]電腦設定切換
電腦切換在設定外觀的部分，提供「淺色」與「深色」模式做選擇。
在默認情況下，Tailwind 未開啟深色模式變體。(考量檔案大小)
啟用關燈模式，必須在 tailwind.config.js 文件中把 darkMode 選項設置為media。
- media：讓裝置在深色模式的時候自動轉換。
- class：手動切換深色模式。
❗ media 是一個字串
接著開始設定 dark 模式，用法即是在關燈模式欲採用的 class 前面加上 dark:。(原本設定的 class 不要去動它)
以資料表中的部分為例：
其中的 nightgray eclipse 都是自定義顏色在 tailwind.config.js。
設定完成時，操控電腦設定外觀模式，即可切換。
[實作]手動切換
手動切換關燈模式，必須在 tailwind.config.js 文件中把 darkMode 選項設置為class。
首先加上切換的按鈕，如下：
<span class="flex justify-end">
<button id="light" class="px-4 py-2 rounded-full bg-white border-gray-400 border-2 text-gray-700 text-sm">
日間模式 <span><img src="img/icon-sun.png" alt="sun" class="h-4 sm:h-4 inline-block"></span>
<button id="dark" class="px-4 py-2 rounded-full bg-gray-700 border-gray-700 border-2 text-white text-sm">
夜間模式 <span><img src="img/icon-moon.png" alt="moon" class="h-4 sm:h-4 inline-block"></span>
</button>
</span>其中按鈕，各自給予對應的id，是為了點按手動切換模式需要用到的。
並在 html 檔案中加入：
<script>
let light = document.getElementById("light");
let dark = document.getElementById("dark");
light.addEventListener("click", function () {
document.documentElement.classList.remove("dark");
});
dark.addEventListener("click", function () {
document.documentElement.classList.add("dark");
});
</script>在 input.css 檔案加入 body 深色設定：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply dark:bg-eclipse;
}
}成果如下：
🙏 感謝 Tim Hsu文章 TailwindCSS 從零開始 — dark 深色模式
此篇文章記錄關燈模式的實作。附上 Health 專案的 GitHub 檔案連結 🔗 ，專案資料夾名稱：tailwindcss-Health 。有任何指點或建議都可以在下方留言～
⛄ Tailwind CSS can be very efficient for developers.
