【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode

閱讀時間約 11 分鐘

今天在練習寫網頁時,剛好要來有做到Dark Mode 的功能,那順便來記錄一下做法~

首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢?

raw-image

😀就是這邊拉~當你按下按鈕時,javascript 的toggle()去為<html>增加dark標籤。

在知道原理後,我們要如何去實作“在一個標籤中同時有兩個模式的CSS”,這邊以Tailwind.css做示範

<body class="bg-white text-black dark:bg-darkBlue dark:text-white"
>123</html>

先設定好原本的CSS,在額外設定dark: Dark Mode 的樣式就好拉~

那其實這也沒什麼,但有一個問題就是,怎麼製作觸發的按鈕。我一開始還以為要全部手尻(汗),但後來才發現其實Tailwind有幫我們做好了(佛心公司~佛心公司~🥰)

頁面連結

raw-image

那這邊就有明明白白地跟你說拉~

  1. Toggle dark mode by checking user preference in the <head> tag of your HTML (將下面這段代碼放在head標籤)
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
  1. 最棒的地方來了,他直接提供現成的button SVG,直接複製貼上就行拉~
Create a <button> element that can be interacted with to manually change the theme color:
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>

啊就給他複製到你的網頁,他會長這樣:

raw-image
raw-image
  1. Add the following JavaScript inside your main file to handle the click events on the <button> element 再新增一個JavaScript檔,將下列內容貼近去,並將其JavaScript檔引入html
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');

// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}

// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}

});

這邊可以稍微留意一下,步驟一根步驟三的內容其實大同相似,差別是在於:

第一步是提供給一開始渲染網站時,是否要轉成Dark Mode 的依據,那這個依據會取決於localStorage是否有Dark Mode 的紀錄。

第三步的代碼,在更改Dark Mode的同時,也會更新localStorage,那假入筆者手殘「啪」一聲,關掉原本的網頁,再重新開啟時,就會保留原本Dark Mode的依據。




4會員
10內容數
留言0
查看全部
發表第一個留言支持創作者!
W. C. Chen的沙龍 的其他內容
當然指令不是背的,所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN,這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai
這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~,那我登入的方式為github。以下就是你會看的頁面。 上傳完後,就回到Netlify,選擇github,並選取剛剛建立好的專案。 接著進行部屬網站前的先置(但我自己基本是除了網站名稱,
本文將引導您使用簡單的 Header 組件,學習如何使用 render 和 screen 來渲染和查詢元素。我們將探索如何測試文字和字元計數功能,並使用 userEvent 模擬使用者操作。了解如何使用斷言來確保測試結果正確。同時,我們將處理包含 fetch 的異步測試,並介紹 waitFor 函數
當然指令不是背的,所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN,這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai
這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~,那我登入的方式為github。以下就是你會看的頁面。 上傳完後,就回到Netlify,選擇github,並選取剛剛建立好的專案。 接著進行部屬網站前的先置(但我自己基本是除了網站名稱,
本文將引導您使用簡單的 Header 組件,學習如何使用 render 和 screen 來渲染和查詢元素。我們將探索如何測試文字和字元計數功能,並使用 userEvent 模擬使用者操作。了解如何使用斷言來確保測試結果正確。同時,我們將處理包含 fetch 的異步測試,並介紹 waitFor 函數
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
狗尿失禁 最常使用狗尿布的原因之一就是狗尿失禁。實際上尿失禁可能不是狗狗的行為問題。它可能是由尿路感染,膀胱問題,尿道括約肌減弱和細菌感染或糖尿病等疾病引起的。即使是訓練有素的狗也可能患有這種疾病,無法控制排尿的衝動。如果您懷疑狗的事故與行為無關,那麼第一步就是請您的獸醫諮詢。有些藥物和手術有時可以
Thumbnail
現在,讓我們再一次看看Apple會不會在Mac上拋棄「過時」的Intel x86系列處理器,而改用自家設計的ARM架構晶片。這個過程聽起來好像很不錯,然而如果在2006年要做很容易,在2021年就不是那麼簡單了。
Thumbnail
上一篇文章〈Leanpub 網站使用介面概覽〉介紹了註冊 Leanpub 會員的步驟(非常簡單,且免費)以及 Leanpub 網站的選單操作介面,而這篇文章就要來告訴你建立書籍的步驟。在建立書籍的過程中,你也會大致了解 Leanpub 的免費與付費方案有哪些重要差異。
Thumbnail
#我該投資加密貨幣嗎🤔  昨天有學員請教我,有沒有推薦的律師。因為他跟朋友合資,用加密貨幣USDT付房租,結果USDT大跌,房東認為他詐欺,所以請律師給他寄了存證信函,讓他相當緊張。 談這件事情,先讓我們瞭解一下什麼是USDT。 📍[泰達幣] USDT中文名稱是泰達幣,根據發行公司Tethe
Thumbnail
以電信公司離網分析 (churn rate)預測為例 既有手動資料分析的挑戰: 電信公司與上千萬個客戶簽約,因此顧客資料量龐大,難以分析 需有專業人員進行複雜的數據建模,導致人力、時間、工具成本昂貴,無法彈性擴展應用 新進人員需要時間訓練,無法快速上手 分析目的:     使用過
Thumbnail
有時候會想要看一些東南亞的基礎報告,像是經濟成長、人口分佈、上網習慣等等,除了三月間我分享的這份報告,非常詳實而且免費,幾乎是很難挖到什麼寶貝的。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
狗尿失禁 最常使用狗尿布的原因之一就是狗尿失禁。實際上尿失禁可能不是狗狗的行為問題。它可能是由尿路感染,膀胱問題,尿道括約肌減弱和細菌感染或糖尿病等疾病引起的。即使是訓練有素的狗也可能患有這種疾病,無法控制排尿的衝動。如果您懷疑狗的事故與行為無關,那麼第一步就是請您的獸醫諮詢。有些藥物和手術有時可以
Thumbnail
現在,讓我們再一次看看Apple會不會在Mac上拋棄「過時」的Intel x86系列處理器,而改用自家設計的ARM架構晶片。這個過程聽起來好像很不錯,然而如果在2006年要做很容易,在2021年就不是那麼簡單了。
Thumbnail
上一篇文章〈Leanpub 網站使用介面概覽〉介紹了註冊 Leanpub 會員的步驟(非常簡單,且免費)以及 Leanpub 網站的選單操作介面,而這篇文章就要來告訴你建立書籍的步驟。在建立書籍的過程中,你也會大致了解 Leanpub 的免費與付費方案有哪些重要差異。
Thumbnail
#我該投資加密貨幣嗎🤔  昨天有學員請教我,有沒有推薦的律師。因為他跟朋友合資,用加密貨幣USDT付房租,結果USDT大跌,房東認為他詐欺,所以請律師給他寄了存證信函,讓他相當緊張。 談這件事情,先讓我們瞭解一下什麼是USDT。 📍[泰達幣] USDT中文名稱是泰達幣,根據發行公司Tethe
Thumbnail
以電信公司離網分析 (churn rate)預測為例 既有手動資料分析的挑戰: 電信公司與上千萬個客戶簽約,因此顧客資料量龐大,難以分析 需有專業人員進行複雜的數據建模,導致人力、時間、工具成本昂貴,無法彈性擴展應用 新進人員需要時間訓練,無法快速上手 分析目的:     使用過
Thumbnail
有時候會想要看一些東南亞的基礎報告,像是經濟成長、人口分佈、上網習慣等等,除了三月間我分享的這份報告,非常詳實而且免費,幾乎是很難挖到什麼寶貝的。