ダーク モードの再読み込みによる白いちらつきの問題

永続化のためにローカル ストレージを利用するダーク モード機能を実装する場合、直面する一般的な問題は次のとおりです。ページをリロードすると白い背景がちらつきます。これは、通常、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);
});

この解決策を実装すると、白いちらつきを防ぎ、ページのリロード時にライト モードとダーク モードの間でシームレスに移行できるようになります。