ホームページ  >  記事  >  ウェブフロントエンド  >  ダークモードでページをリロードする際に白い背景のちらつきを防ぐ方法は?

ダークモードでページをリロードする際に白い背景のちらつきを防ぐ方法は?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-31 18:19:29512ブラウズ

How to Prevent White Background Flickering on Page Reload in Dark Mode?

ページのリロード時にダーク モードで白い背景がちらつく

この問題は、ユーザーがダーク モードを有効にしてページをリロードすると発生し、一時的なダークモードに戻る前に白い背景が表示されます。この短いちらつきは気が散り、ユーザー エクスペリエンスを損なう可能性があります。

この問題に対処するための理想的な解決策は、必要なダーク モード設定が適用されるまでページのレンダリングを防ぐことです。これは、最小限の <script> を配置することで実現できます。 <head> の先頭にタグを追加します。 element.</script>

<code class="html"><head>
  <script>
    // Set theme in <HEAD> to avoid render blocking.
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>
  <!-- Meta, title, etc... -->
  <!-- Link, style, etc... -->
</head></code>

他のタグの前にこのスクリプトを実行すると、ブラウザは DOM 解析を一時停止し、JavaScript インタープリタを呼び出します。これにより、data-theme 属性を に割り当てることができます。

さらに、 を閉じる直前に、レンダリングをブロックしない方法で残りのスクリプトをロードすることをお勧めします。 tag:

<code class="html"><body>
  <!-- Page content -->
</body>
<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 までご連絡ください。