首页 >web前端 >css教程 >如何防止深色模式重新加载期间白色背景闪烁？

如何防止深色模式重新加载期间白色背景闪烁？

Patricia Arquette原创: 2024-11-04 02:58:011021浏览

How to Prevent White Background Flickering During Dark Mode Reload?

如何消除深色模式重新加载期间的白色背景闪烁

在应用中实现深色模式时，解决白色问题至关重要页面重新加载时背景闪烁。这种难看的闪烁是在页面最初以浅色模式加载然后切换到深色模式之前发生的。

解决方案：阻止页面渲染

解决此闪烁问题的关键在于阻塞页面渲染。通过在

中放置一个小脚本标签文档部分，您可以停止 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>

在 JavaScript 文件中，调整代码如下：

附加说明：

如果需要，您可以将上述 JavaScript 代码合并到单个 .js 文件中。

考虑使用微调器或在初始主题转换期间加载动画以改善用户体验。

以上是如何防止深色模式重新加载期间白色背景闪烁？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html if for using Attribute JS dom this position background transition animation issue

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Can I Span a Div Across Multiple Rows and Columns in a Grid Without Using CSS Grid Layout or Tables?下一篇：How Can I Use Variables in CSS Selectors with SCSS?

查看更多