如何消除深色模式重新加載期間的白色背景閃爍
在應用中實現深色模式時，解決白色問題至關重要頁面重新載入時背景閃爍。這種難看的閃爍是在頁面最初以淺色模式加載然後切換到深色模式之前發生的。
解決方案：阻止頁面渲染
解決此閃爍問題的關鍵在於阻塞頁面渲染。透過在
中放置一個小腳本標籤文件部分，您可以停止 DOM 解析器程序。這允許 JavaScript 解釋器將 data-theme 屬性指派給 。實現：
<code class="html"><script>
// Set the theme in <HEAD> before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></code><code class="html"><script src="js/index.js"></script> <!-- Other <script> tags here --> </body> </html></code>
<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>
以上是如何防止深色模式重新載入期間白色背景閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
