昨天已經完成了主題 Token 的基礎，今天希望可以進一步把整個網站都「吃」進 Token，讓深/淺色模式不只是背景換色，而是有能讓整個使用體驗更完整的感覺，為什麼要做這一步？是因為Day 15 的成果，雖然網站已經能切換深/淺色，但只有「最基礎背景與文字」。實際使用時，我發現還有一些可以好的地方，例如：按鈕 hover/active 的顏色差異不足、表單在暗色下邊框太淡導致不容易看清、任務完成項目需要更清楚的淡化＋刪除線、使用鍵盤 Tab 時，focus ring 太隱晦等等等，所以 Day 16，就想著要把 卡片、按鈕、表單、導覽列、清單、focus ring 全部覆蓋掉，真的讓深色模式用起來舒服。
想達到這樣的效果，做法步驟有：

1. index.html（防閃白腳本）：先在 放一小段 JS，在頁面還沒渲染前就決定主題
2. style.css（Token + 全站覆蓋）：把顏色全抽成變數，然後在 Light/Dark 定義不同值，然後全站用 var(--*)：卡片、按鈕、表單、導覽列、清單項目…
3. ThemeToggle.vue（切換元件）：提供 一鍵切換按鈕 + 下拉選單（完整元件已經在程式碼庫裡，支援 localStorage 保存與 system 模式跟隨系統變化。）
4. App.vue 整合：把 放到 Header 右上角
   今天的最終成果長這樣~~
   淺色模式：
   
   深色模式：
   
   經過了今天的努力，重整不會再閃白了， 切換 auto/light/dark 時依舊能正確保存，系統換主題時，auto 模式也會跟著換，任務完成後可讀性還是很好，鍵盤 Tab 有比較明顯的 focus ring 了！完成了深/淺色模式的 全站覆蓋，不只是背景和文字，而是按鈕、清單、卡片、表單全部一致。這讓網站在夜間使用時非常舒適，白天黑夜都能保有清楚的對比與可讀性。期待明天的文章吧！