如何防止深色模式重新加载期间白色背景闪烁？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-04 02:58:01

原创

1020 人浏览过

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 文件中，调整代码如下：

附加说明：