---
tags: 網頁切版直播班 - 2022 夏季班
---

# 8/3(三) 週任務
## Dark mode 深色模式

承第三週的 Footer 版型，點擊按鈕後會切換為 [Dark mode 深色模式](https://tailwindcss.com/docs/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 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：[Codepen 連結](https://codepen.io/AliceChiang/pen/gOoEGjr?editors=1010) -->

回報區
---

| Discord | CodePen |
|:-----------:|:----------------------------------------------------------------:|
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/vYRRNaL) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/NWYYGYv) |
| Chaoci#2460 | [Codepen](https://codepen.io/gmailchao/pen/bGvvRMR?editors=1010) |
| How#5806 | [Codepen](https://codepen.io/howtobefine/pen/VwXyZNY) |
| aki | [codepen](https://codepen.io/aki168/pen/OJvvvPV) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/rNdvaYE?editors=1011) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/vYRjLWx) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/PoRezxz?editors=1010) |
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/QWmrvpX?editors=1011)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/jOzxpyV?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/gOezBqq?editors=1010)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/YzavWLM?editors=1010)|
|annanna#6011|[Codepen](https://codepen.io/annaprosty/pen/YzajjXe)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/PoRxOPK)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/poLYYMK)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/PoemezR)|