重新加载深色模式页面时如何防止白色闪烁？
- Barbara Streisand原创
- 2024-11-01 07:05:31731浏览
深色模式重新加载时出现白色闪烁问题
在实现利用本地存储进行持久化的深色模式功能时，面临的一个常见问题是页面重新加载时白色背景闪烁。出现这种情况是因为 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