深色模式重新加載時出現白色閃爍問題

實現利用本地存儲進行持久化的深色模式功能時，面臨的一個常見問題是頁面重新載入時白色背景閃爍。出現這種情況是因為 DOM 解析器通常會在套用深色模式樣式之前渲染頁面。

解決方案：阻止頁面渲染

要解決此問題，我們可以阻止頁面使用放置在文件

將以下腳本放在

接下來，將所有其他腳本移到結束 標記之前的非渲染阻塞方式：

最後，在js/index.js 檔案中，使用以下程式碼：

const elToggleTheme = document.querySelector('#dark-mode-button input[type="checkbox"]');

elToggleTheme.checked = localStorage.theme === "dark";

elToggleTheme.addEventListener("change", () => {
  const theme = elToggleTheme.checked ? "dark" : "light";
  setTheme(theme);
});

透過實作此解決方案，您可以防止白色閃爍並確保頁面重新載入時淺色和深色模式之間的無縫過渡。