LESSON-06 · TOPIC 04
能以 data-theme 同步切換頁面、卡片、文字、邊框、按鈕與 focus token，且 localStorage 不可用時仍回退到 light。
能以 data-theme 同步切換頁面、卡片、文字、邊框、按鈕與 focus token，且 localStorage 不可用時仍回退到 light。
只改背景會留下低對比文字與看不見的 focus；若儲存例外中斷初始化，整個主題控制也可能失效。
要修改的檔案：files/starter/style.css
定位：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。｜依 module-4 定位，只修改「完整 Light／Dark 主題對照」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
深色模式只換了背景，卡片仍白、文字仍深藍、focus 幾乎看不見；隱私模式下 localStorage 又拋出例外。
起始狀態：預覽根節點 data-theme=light；完整 light tokens 生效，尚未執行 dark 切換。
runtime attribute 由 light 變 dark，完整預覽同步變色；儲存讀寫皆由 try/catch 包住，失敗時仍套用 light 並可手動切換。
驗收證據：runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤
網站提供手動明暗主題，或需要在系統偏好之外保存訪客選擇時。
常見混淆：prefers-color-scheme 是系統偏好；手動 data-theme 是使用者明確選擇。若兩者並存，需先定義優先順序。
這段程式是理解起點，不是要你直接跳過 Starter。
主題切換不是只關燈，而是一次換掉所有有責任的色彩；記憶功能壞掉時，頁面仍要能正常顯示與操作。
正式說法：Theme scope 以 data-theme 觸發 semantic custom properties cascade；持久化是可失敗的增強功能，核心 applyTheme 必須在 storage exception 下維持 deterministic fallback。
function safeRead(){try{const v=localStorage.getItem('theme');return v==='dark'?'dark':'light'}catch{return 'light'}} function safeWrite(v){try{localStorage.setItem('theme',v)}catch{}} function applyTheme(v){root.dataset.theme=v;toggle.setAttribute('aria-pressed',String(v==='dark'))}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。。
檔案：files/starter/style.css 定位：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。
要做：執行實驗把主題預覽根節點的 data-theme 由 light 設為 dark；再以 safeRead/safeWrite 測試 storage 失敗仍回退 light。
預期：runtime attribute 由 light 變 dark，完整預覽同步變色；儲存讀寫皆由 try/catch 包住，失敗時仍套用 light 並可手動切換。
證據：runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤
卡住先查：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。
檔案：files/starter/style.css 定位：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime attribute 由 light 變 dark，完整預覽同步變色；儲存讀寫皆由 try/catch 包住，失敗時仍套用 light 並可手動切換。
證據：runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤
卡住先查：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
背景、文字、邊框與操作都讀取 token。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先把所有元件顏色改成 semantic tokens，再談切換。
dark scope 只覆寫 token；applyTheme 同步 data-theme、aria-pressed 與文字。
完整解答與原因：data-theme=dark 透過 cascade 一次換六類 token；safeRead/safeWrite 各自 catch storage 例外，失敗時回傳 light，核心套用與鍵盤操作仍可執行。