Mengapa Mod Gelap Saya Berkelip Putih semasa Muat Semula?-tutorial css-php.cn

Mengapa Mod Gelap Saya Berkelip Putih semasa Muat Semula?

Barbara Streisand

Lepaskan： 2024-11-02 05:11:02

asal

526 orang telah melayarinya

Why Does My Dark Mode Flicker White on Reload?

Mod Gelap Berkelip Latar Belakang Putih semasa Muat Semula: Menyelesaikan Lag

Menggabungkan ciri mod gelap selalunya memperkenalkan isu di mana latar belakang putih berkelip seketika apabila dimuat semula halaman. Ini berlaku disebabkan kelewatan dalam menggunakan tetapan tema gelap, yang boleh dikaitkan dengan susunan pemaparan.

Untuk menangani masalah ini, adalah penting untuk menghalang halaman daripada dipaparkan lebih awal. Dengan meletakkan teg skrip kecil dalam bahagian, kami boleh menyekat pemaparan halaman dan memastikan atribut tema gelap diberikan kepada sebelum meneruskan.

Skrip ini hendaklah disertakan pada permulaan , mengambil keutamaan daripada mana-mana teg lain:

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

Salin selepas log masuk

Selepas itu, adalah disyorkan untuk meletakkan mana-mana skrip lain dalam cara tanpa render-block, betul-betul sebelum penutup tag. Ini akan menghalang mereka daripada mengganggu proses penetapan tema:

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> and </html> go here --></code>

Salin selepas log masuk

Dalam fail js/index.js, kod berikut akan menogol tema mod gelap:

<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

Dengan melaksanakan langkah ini, latar belakang putih yang berkelip semasa muat semula halaman boleh dihapuskan dengan berkesan, memastikan peralihan yang lancar kepada mod gelap.

Atas ialah kandungan terperinci Mengapa Mod Gelap Saya Berkelip Putih semasa Muat Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!