如何防止深色模式下页面重新加载时白色背景闪烁？
- 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