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

首页

web前端

css教程

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

Barbara Streisand

Oct 31, 2024 pm 06:19 PM

How to Prevent White Background Flickering on Page Reload in Dark Mode?

深色模式在页面重新加载时闪烁白色背景

当用户启用深色模式并重新加载页面时会出现此问题，导致短暂的在恢复到深色模式之前显示白色背景。这种短暂的闪烁可能会分散用户的注意力并降低用户体验。

要解决此问题，理想的解决方案是在应用必要的深色模式设置之前阻止页面渲染。这可以通过放置一个最小的<script>来实现。 <head> 开头的标签element.</script>

<code class="html">
  <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... -->
</code>

通过在任何其他标签之前执行此脚本，浏览器将暂停 DOM 解析并调用 JavaScript 解释器。这允许将 data-theme 属性分配给文件。元素，确保页面在启用深色模式的情况下无缝加载。

此外，建议在关闭之前以非渲染阻塞的方式加载其余脚本。 tag:

<code class="html">
  <!-- Page content -->

<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