為什麼我的深色模式在重新加載時會閃爍白色？
- Barbara Streisand原創
- 2024-11-02 05:11:02627瀏覽
深色模式在重新加載時閃爍白色背景：解決延遲
合併深色模式功能通常會帶來白色背景短暫閃爍的問題頁面重新載入時。出現這種情況的原因是應用深色主題設定時出現延遲，這可歸因於渲染順序。
要解決此問題，防止頁面過早渲染至關重要。透過在
中放置一個小腳本標籤部分，我們可以阻止頁面渲染並確保將深色主題屬性指派給 部分。此腳本應包含在
的開頭，優先於任何其他標籤：<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>
隨後，建議將任何其他腳本放置在非渲染阻塞方式，就在關閉 之前標籤。這將防止他們中斷主題分配過程：
<code class="html"><script src="js/index.js"></script> <!-- other <script> tags here --> <!-- Closing </body> and </html> go here --></code>
在js/index.js 檔案中，以下程式碼將切換暗模式主題：
<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>
透過實作通過這些步驟，可以有效消除頁面重新載入時的白色背景閃爍，確保無縫過渡到深色模式。
以上是為什麼我的深色模式在重新加載時會閃爍白色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn