Solution · code-edit

完整 Light／Dark 主題對照

對照完整答案、責任邊界與原因。

Solution 要做什麼

對照完整答案、責任邊界與原因。

本主題檔案：files/style.css

定位：先在 Elements 確認 data-theme=light，再逐項記錄 surface、text、border、action、focus 的 Computed 顏色。

開啟實作檔案 →回到主題說明

本階段驗收

頁面不會替你修改檔案；請在實作檔完成後重新整理確認。

目前要處理

預覽根節點 data-theme=light；完整 light tokens 生效，尚未執行 dark 切換。

預期看到

runtime attribute 由 light 變 dark，完整預覽同步變色；儲存讀寫皆由 try/catch 包住，失敗時仍套用 light 並可手動切換。

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'))}

檔案清單

只在本階段資料夾內操作，避免改到其他章節。

index.html
入口檔案：提供一張可觀察字型、色彩與背景的服務卡片。
style.css
呈現層：依 Starter／Checkpoint／Solution 展示本堂 CSS 差異。
main.js
驗收輔助：按鈕後讀取 Computed Style、計算對比並列出尚未通過條件。

證據：runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤

回到主題說明