ホームページ  >  記事  >  ウェブフロントエンド  >  ダークモードでリロードすると白くちらつくのはなぜですか?

ダークモードでリロードすると白くちらつくのはなぜですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-02 05:11:02527ブラウズ

Why Does My Dark Mode Flicker White on Reload?

リロード時にダーク モードで白い背景がちらつく: ラグの解決

ダーク モード機能を組み込むと、白い背景が一時的に点滅する問題が発生することがよくありますページのリロード時。これは、ダーク テーマ設定の適用の遅延が原因で発生します。これは、レンダリングの順序に起因する可能性があります。

この問題に対処するには、ページが途中でレンダリングされないようにすることが重要です。 内に小さな script タグを配置することで、セクションでは、ページのレンダリングをブロックし、ダーク テーマ属性が に確実に割り当てられるようにすることができます。

このスクリプトは、他のタグよりも優先して、 の先頭に含める必要があります。

<code class="html"><head>
  <script>
    // Place this in <HEAD> top before other tags
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>

  <!-- meta, title, etc... -->
</head></code>

その後、他のスクリプトを次の場所に配置することをお勧めします。

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

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