Rumah > Artikel > hujung hadapan web > Mengapa Mod Gelap Saya Berkelip Putih semasa Muat Semula?

Mengapa Mod Gelap Saya Berkelip Putih semasa Muat Semula?

Barbara Streisandasal: 2024-11-02 05:11:02527semak imbas

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>

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>

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>

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!

html Attribute JS this background transition issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Menggayakan Panel pemilihan tikar dengan berkesan dalam Bahan Sudut?Artikel seterusnya：Bagaimana untuk Menggayakan Panel pemilihan tikar dengan berkesan dalam Bahan Sudut?

Artikel berkaitan

Lihat lagi