ダークモードでページをリロードする際に白い背景のちらつきを防ぐ方法は?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-31 18:19:29

オリジナル

530 人が閲覧しました

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