ダークモードでリロードすると白くちらつくのはなぜですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-02 05:11:02

オリジナル

598 人が閲覧しました

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 サイトの他の関連記事を参照してください。