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

Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip Semasa Muat Semula Mod Gelap?

Patricia Arquette

Lepaskan： 2024-11-04 02:58:01

asal

981 orang telah melayarinya

How to Prevent White Background Flickering During Dark Mode Reload?

Cara Menghapuskan Kelipan Latar Belakang Putih Semasa Muat Semula Mod Gelap

Apabila melaksanakan mod gelap dalam apl, adalah penting untuk menangani isu putih latar belakang berkelip apabila dimuat semula halaman. Kelipan yang tidak sedap dipandang ini berlaku apabila halaman pada mulanya dimuatkan dalam mod terang sebelum bertukar kepada mod gelap.

Penyelesaian: Cegah Pemaparan Halaman

Kunci untuk menyelesaikan isu kelipan ini terletak pada menyekat pemaparan halaman. Dengan meletakkan teg skrip kecil dalam bahagian dokumen, anda boleh menghentikan proses parser DOM. Ini membenarkan jurubahasa JavaScript untuk menetapkan atribut tema data kepada elemen sebelum meneruskan proses pemaparan halaman.

Pelaksanaan:

Tambahkan Skrip pada :

<code class="html"><script>
    // Set the theme in <HEAD> before any other tag.
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
</script></code>

Salin selepas log masuk

Alihkan Skrip ke Hujung :

Letakkan semua skrip lain dalam cara tidak menyekat render, betul-betul sebelum penutup tag:

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

Salin selepas log masuk

Kemas kini JavaScript untuk Kefungsian Togol:

Di dalam fail JavaScript anda, laraskan kod seperti berikut:

<code class="javascript">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

Nota Tambahan:

Anda boleh menggabungkan kod JavaScript di atas menjadi satu fail .js jika mahu.
Pertimbangkan untuk menggunakan pemutar atau memuatkan animasi semasa peralihan tema awal untuk meningkatkan pengalaman pengguna.

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