到昨天為止，我設計的網站已經有了完整的基本功能，雖然看起來已經很實用了，但用久之後，出現了一個問題，那就是 白底在晚上使用真的很刺眼， 我自己晚上 coding，開著白色背景，眼睛一下就受不了了， 所以 Day 15 的任務，就是讓網站支援 深色模式 (Dark mode)，而且能隨時一鍵切換。
想達成這種效果，需要在style.css 裡定義，將顏色變成變數，這樣一來，之後整個網站不再被寫死顏色，而是用 var(--bg)、var(--fg)、var(--accent)。就像是把顏色收進「油漆桶」，只要換桶子（變數值），整面牆（網站）就會自動變色！接著，如果單純靠 CSS，使用者打開網站的時候會先看到白底，過一秒才變黑。那種「閃一下」真的會很影響體驗，所以需要在 index.html 頭部插了一小段 JS，如果用戶之前切過，就從 localStorage 讀出來；如果沒有，就跟隨系統，再把結果寫進 ，這樣一來，網站打開時就能「乾淨地」以正確主題呈現！另外，我還想到可以加一個元件 ThemeToggle.vue，讓使用者自己選，這樣使用者就能用下拉選單，決定要亮、暗，還是自動，讓整體使用下來更舒心！
為了讓調出來的深色模式更方便看和閱讀我反覆調了很多次幾個變數，最後讓整體畫面看起來有舒服的感覺，期待明天的文章吧！
今天最終成果長這樣：