8/3(三) 週任務

Dark mode 深色模式

承第三週的 Footer 版型，點擊按鈕後會切換為 Dark mode 深色模式，如圖：

Dark Mode 背景色：bg-slate-900
Dark Mode 文字色：text-slate-500

---

Tailwind CSS CDN

<script src="https://cdn.tailwindcss.com"></script>

部分程式碼
HTML:

<button id="btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold mb-6 py-2 px-4 rounded">Toggle Dark Mode</button>

這裡放 footer 程式碼

JS:

tailwind.config = {
  ...
}

// 選取 button 元素
const btn = document.getElementById("btn");
// 選取 footer 元素
const footer = document.getElementById("footer");

// 點擊 button 元素觸發事件，將 footer 動態加入或移除 class="dark" 
btn.addEventListener('click', function() {
  footer.classList.toggle("dark");
});

回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看）

回報區

Discord	CodePen
黃士桓#7654	codePen
Chi#7605	Codepen
Chaoci#2460	Codepen
How#5806	Codepen
aki	codepen
yuyu#6310	Codepen
威爾#1694	CodePen
布魯諾#7239	CodePen
Cliff#4606	Codepen
雷雷#7844	Codepen
Fang#4680	Codepen
Joyce#3790	Codepen
annanna#6011	Codepen
hungya#0773	Codepen
sophiee#7015	Codepen
LinaChen#1796	Codepen