ダークモードページをリロードするときに白いちらつきを防ぐにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ダークモードページをリロードするときに白いちらつきを防ぐにはどうすればよいですか?

Barbara Streisand

Nov 01, 2024 am 07:05 AM

How to Prevent White Flickering When Reloading a Dark Mode Page?

ダークモードのリロードでの白いちらつきの問題

永続化のためにローカルストレージを利用するダークモード機能を実装する場合、直面する一般的な問題は次のとおりです。ページをリロードすると白い背景がちらつきます。これは、通常、DOM パーサーがダークモードスタイルが適用される前にページをレンダリングするために発生します。

解決策: ページレンダリングをブロック

この問題を解決するには、ページをブロックします。内に配置された小さなスクリプトを使用してレンダリングします。あなたの文書の。このスクリプトは、に data-theme 属性を設定します。

次のスクリプトを内に配置します。他のタグの前:

<code class="html"><script>
  // IMPORTANT: set this in <HEAD> top before any other tag.
  const setTheme = (theme) => {
    theme ??= localStorage.theme || "light";
    document.documentElement.dataset.theme = theme;
    localStorage.theme = theme;
  };
  setTheme();
</script></code>

ログイン後にコピー

次に、他のすべてのスクリプトを、終了の直前にレンダリングをブロックしない方法に移動します。 tag:

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> </html> goes here --></code>

ログイン後にコピー

最後に、js/index.js ファイルで次のコードを使用します:

<code class="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);
});</code>

ログイン後にコピー

このソリューションを実装すると、白いちらつきを防ぎ、確実にページのリロード時にライトモードとダークモードの間でシームレスに移行します。

以上がダークモードページをリロードするときに白いちらつきを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。