現在不管是 App 還是作業系統，幾乎都有 dark mode。工程師族群尤其習慣開著深色模式工作——長時間盯著螢幕，眼睛比較不累。
既然自己也是這樣用的，blog 當然也需要有這個功能。於是我跟 AI 一起來實作。
沒有這個習慣的使用者，則可以保持白底介面，不影響原本的閱讀習慣。
實作起來沒有想像中複雜，主要是 CSS 這邊的調整就可以搞定。但做完第一版、切到 light mode 之後，我發現 code block 沒有跟著變——它還是深色的。這才開始了一系列的討論，去找真正的解決方案。
這篇記錄的就是這個過程：Dark/Light mode 切換的實作，以及後來發現 code block 需要另外處理——才能真正完成一套完整的主題切換體驗。
---
## CSS 架構：從 media query 改成 class-based
最直觀的做法是用 `@media (prefers-color-scheme: dark)` 跟著系統走。但這樣沒有辦法手動切換——使用者按了 toggle，沒有任何地方可以寫入「我要覆蓋系統設定」。
改成 class-based 是標準解法：
```css
/* 淺色（預設） */
:root {
--bg: #ffffff;
--text: #111111;
}
/* 深色：html 加上 .dark class 就切換 */
html.dark {
--bg: #111111;
--text: #f0f0f0;
}
```
Toggle 按下去，JS 在 `` 加或移除 `.dark`，整頁顏色跟著 CSS 變數走。
---
### 防閃爍：UX 細節，但讀者感受得到
做完 dark mode 之後，還有一個細節要處理。
如果你選了 dark mode，每次重新整理頁面，它會先閃一下淺色再切回去——只有零點幾秒，但對長期用深色模式的人來說，那一閃會很突兀，像螢幕突然打了你一下。
這個問題叫 FOUC（Flash of Unstyled Content）。解法是在 `` 最早的位置放一段 inline script，在任何 CSS 執行之前就把 class 設好：
```js
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = saved ?? (prefersDark ? 'dark' : 'light');
document.documentElement.classList.add(theme);
```
這段要在所有 `` 和 `