Rumah >hujung hadapan web >tutorial css >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:02629semak imbas
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!