如何消除頁面重新載入時的暗模式閃爍？
- Mary-Kate Olsen原創
- 2024-11-03 10:40:03421瀏覽
深色模式在重新載入時閃爍白色：阻止渲染以實現無縫過渡
使用本機儲存時，會出現頁面重新儲存時，會出現頁面重新儲存載入時深色模式閃爍的問題保留使用者偏好。要解決此問題，建議首先阻止頁面渲染，然後套用主題首選項。
解決方案：阻止頁面渲染
在
中實作這個小腳本;任何其他標籤之前的部分：<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></code>
此腳本根據本機儲存初始化主題或預設為“light”。
非阻塞腳本
將所有其他腳本放在結束 之前以非渲染阻塞的方式標記：
<code class="html"><script src="js/index.js"></script> <script src="other_scripts.js"></script> <!-- Closing </body> and </html> go here --></code>
index.js中的自訂
在index.js檔案中，處理主題切換：
<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>
此程式碼在切換複選框時更新主題。您也可以將此腳本放置在單獨的 JS 檔案中。
透過實作這些更改，頁面渲染最初將被阻止，從而可以立即設定主題首選項。這消除了白色閃爍效果，並提供明暗模式之間的無縫過渡。
以上是如何消除頁面重新載入時的暗模式閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn