Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghapuskan Kelipan Mod Gelap pada Muat Semula Halaman?
Bagaimana untuk Menghapuskan Kelipan Mod Gelap pada Muat Semula Halaman?
- Mary-Kate Olsenasal
- 2024-11-03 10:40:03421semak imbas
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 Penyesuaian dalam index.js Dalam fail index.js, kendalikan togol tema: 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!<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>
<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>