我們已經成功讓待辦清單可以「新增、刪除、標記完成」任務，甚至能記住資料。
今天，我們要幫它換上漂亮的外衣——
學會做出 亮色 / 暗色主題切換（Light / Dark Mode）
讓網頁從練習作品 → 變成真的能上線使用的「小工具網站」！

什麼是主題切換（Theme Toggle）？

簡單來說，就是讓使用者可以自由選擇：

☀️ 亮色模式（Light Mode） → 清爽乾淨
🌙 暗色模式（Dark Mode） → 柔和護眼

這種功能不只好看，也非常實用。
像是 YouTube、Instagram、GitHub 都有這種模式切換設計！

我們要做什麼？

1️⃣ 建立亮色 & 暗色主題樣式
2️⃣ 用 JavaScript 控制切換效果
3️⃣ 用 LocalStorage 記住使用者選擇

第一步：設計基本主題樣式

我們會用 CSS 的變數（Variable）來設定顏色，
之後只要切換 class，就能一次改整個主題。

:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --card-color: #f2f2f2;
}

body.dark {
  --bg-color: #1e1e1e;
  --text-color: #000000;
  --card-color: #2a2a2a;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

li {
  background-color: var(--card-color);
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 8px;
}

💡 小提醒：
body.dark 的意思是——當 body 有 .dark 這個 class 時，
會套用暗色主題的顏色設定。

第二步：加一個「主題切換」按鈕

在 HTML 加上按鈕（放在清單上方或下方都可以）：

<button id="themeToggle">切換主題</button>

第三步：用 JavaScript 控制切換效果

打開 script.js，加上以下程式碼：

const toggleBtn = document.getElementById('themeToggle')

// 讀取之前儲存的主題
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark')
}

// 點擊按鈕切換主題
toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark')
  const theme = document.body.classList.contains('dark') ? 'dark' : 'light'
  localStorage.setItem('theme', theme)
})

這段程式做了三件事：
1.檢查之前使用者是否設定暗色模式
2.如果有，就自動加上 .dark class
3.點擊按鈕時切換主題，並把結果記錄在 LocalStorage 裡

最終效果

現在，你的待辦清單可以：

✅ 切換亮 / 暗色主題
✅ 記住上次使用的模式
✅ 畫面過渡滑順又有質感

💡 進階挑戰（選修任務）

想讓作品更酷嗎？可以試試

自動偵測系統主題

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (prefersDark) document.body.classList.add('dark')

• 把按鈕換成太陽 / 月亮圖示（可用 emoji 或 icon）
• 加上 CSS 動畫：切換時顏色漸變或按鈕旋轉

🧭 今日小結

今天你學會了：
• 使用 CSS 變數做出兩種主題樣式
• 用 JS 切換主題與儲存設定
• 美化網站的整體風格

我們加了很多新功能，也做了很多視覺上的美化
恭喜你！你的「待辦清單」網站已經不只是練習作品
而是一個能真正拿來用的小型工具網站了！
謝謝你今天的觀看，我是Ting
讓我們明天也一起繼續學習打造酷酷網站吧！