Bagaimana untuk Menghapuskan Kelipan Mod Gelap pada Muat Semula Halaman?-tutorial css-php.cn

Bagaimana untuk Menghapuskan Kelipan Mod Gelap pada Muat Semula Halaman?

Mary-Kate Olsen

Lepaskan： 2024-11-03 10:40:03

asal

360 orang telah melayarinya

How to Eliminate Dark Mode Flickering on Page Reload?

Mod Gelap Berkelip Putih semasa Muat Semula: Menyekat Rendering untuk Peralihan Lancar

Isu mod gelap berkelip pada muat semula halaman timbul apabila menggunakan storan tempatan untuk mengekalkan pilihan pengguna. Untuk menyelesaikan masalah ini, adalah disyorkan untuk menyekat pemaparan halaman pada mulanya dan kemudian menggunakan pilihan tema.

Penyelesaian: Sekat Perenderan Halaman

Laksanakan skrip kecil ini dalam

<code class="html"><script>
  // Set this in <HEAD> top before any other tag.
  const setTheme = (theme) => {
    theme ??= localStorage.theme || "light";
    document.documentElement.dataset.theme = theme;
    localStorage.theme = theme;
  };
  setTheme();
</script></p>
<p>Skrip ini memulakan tema berdasarkan storan setempat atau lalai kepada "cahaya".</p>
<p><strong>Skrip Tidak Menyekat</strong></p> <p>Letakkan semua skrip lain sebelum penutup </body> teg dengan cara tidak menyekat paparan:</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>

Salin selepas log masuk

Penyesuaian dalam index.js

Dalam fail index.js, kendalikan togol tema:

<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

Kod ini mengemas kini tema apabila kotak pilihan ditogol. Anda boleh meletakkan skrip ini secara alternatif dalam fail JS yang berasingan.

Dengan melaksanakan perubahan ini, pemaparan halaman akan disekat pada mulanya, membolehkan pilihan tema ditetapkan dengan segera. Ini menghilangkan kesan kelipan putih dan menyediakan peralihan lancar antara mod terang dan gelap.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Kelipan Mod Gelap pada Muat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!