重新載入深色模式頁面時如何防止白色閃爍？
- Barbara Streisand原創
- 2024-11-01 07:05:31805瀏覽
深色模式重新加載時出現白色閃爍問題
在實現利用本地存儲進行持久化的深色模式功能時，面臨的一個常見問題是頁面重新載入時白色背景閃爍。出現這種情況是因為 DOM 解析器通常會在套用深色模式樣式之前渲染頁面。
解決方案：阻止頁面渲染
要解決此問題，我們可以阻止頁面使用放置在
中的小腳本進行渲染您的文件。該腳本將在 上設定 data-theme 屬性。將以下腳本放入
元素中，然後繼續渲染頁面。在任何其他標籤之前：<code class="html"><script>
// IMPORTANT: 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></code>
接下來，將所有其他腳本移到關閉 之前的非渲染阻塞方式。 tag:
<code class="html"><script src="js/index.js"></script> <!-- other <script> tags here --> <!-- Closing </body> </html> goes 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