重新加载深色模式页面时如何防止白色闪烁？-css教程-PHP中文网

首页

web前端

css教程

重新加载深色模式页面时如何防止白色闪烁？

Barbara Streisand

Nov 01, 2024 am 07:05 AM

How to Prevent White Flickering When Reloading a Dark Mode Page?

深色模式重新加载时出现白色闪烁问题

在实现利用本地存储进行持久化的深色模式功能时，面临的一个常见问题是页面重新加载时白色背景闪烁。出现这种情况是因为 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