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

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

Barbara Streisand

发布： 2024-10-31 18:19:29

原创

530 人浏览过

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

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

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

要解决此问题，理想的解决方案是在应用必要的深色模式设置之前阻止页面渲染。这可以通过放置一个最小的<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中文网其他相关文章！