如何防止深色模式下頁面重新載入時白色背景閃爍？
- Barbara Streisand原創
- 2024-10-31 18:19:29512瀏覽
深色模式在頁面重新載入時閃爍白色背景
當使用者啟用深色模式並重新載入頁面時會出現此問題，導致短暫的在恢復到深色模式之前顯示白色背景。這種短暫的閃爍可能會分散使用者的注意力並降低使用者體驗。
要解決此問題，理想的解決方案是在應用必要的深色模式設定之前阻止頁面渲染。這可以透過放置一個最小的<script>來實現。 <head> 開頭的標籤element.</script>
<code class="html"><head>
<script>
// Set theme in <HEAD> to avoid render blocking.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script>
<!-- Meta, title, etc... -->
<!-- Link, style, etc... -->
</head></code>
透過在任何其他標籤之前執行此腳本，瀏覽器將暫停 DOM 解析並呼叫 JavaScript 解釋器。這允許將 data-theme 屬性指派給 檔案。元素，確保頁面在啟用深色模式的情況下無縫載入。
此外，建議在關閉 之前以非渲染阻塞的方式載入其餘腳本。 tag:
<code class="html"><body> <!-- Page content --> </body> <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