Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?-tutorial css-php.cn

Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?

Barbara Streisand

Lepaskan： 2024-10-31 18:19:29

asal

530 orang telah melayarinya

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

Mod Gelap Berkelip-kelip Latar Belakang Putih pada Muat Semula Halaman

Isu ini timbul apabila pengguna mendayakan mod gelap dan memuat semula halaman, mengakibatkan seketika latar belakang putih dipaparkan sebelum ia kembali kepada mod gelap. Kelipan ringkas ini boleh mengganggu dan menjejaskan pengalaman pengguna.

Untuk menangani masalah ini, penyelesaian yang ideal ialah menghalang halaman daripada dipaparkan sehingga tetapan mod gelap yang diperlukan telah digunakan. Ini boleh dicapai dengan meletakkan tag pada permulaan elemen.

<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>

Salin selepas log masuk

Dengan melaksanakan skrip ini sebelum sebarang teg lain, penyemak imbas akan menjeda penghuraian DOM dan menggunakan penterjemah JavaScript. Ini membenarkan atribut tema data diperuntukkan kepada elemen, memastikan halaman dimuatkan dengan lancar dengan mod gelap didayakan.

Selain itu, adalah disyorkan untuk memuatkan skrip yang tinggal dalam cara tidak menyekat paparan, sejurus sebelum penutupan tag:

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

Salin selepas log masuk

Dalam fail js/index.js, skrip boleh disertakan seperti berikut:

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!