为什么我的深色模式在重新加载时会闪烁白色？-css教程-PHP中文网

首页

web前端

css教程

为什么我的深色模式在重新加载时会闪烁白色？

Barbara Streisand

Nov 02, 2024 am 05:11 AM

Why Does My Dark Mode Flicker White on Reload?

深色模式在重新加载时闪烁白色背景：解决延迟

合并深色模式功能通常会带来白色背景短暂闪烁的问题页面重新加载时。出现这种情况的原因是应用深色主题设置时出现延迟，这可归因于渲染顺序。

要解决此问题，防止页面过早渲染至关重要。通过在

中放置一个小脚本标签部分，我们可以阻止页面渲染并确保将深色主题属性分配给部分。

此脚本应包含在

的开头，优先于任何其他标签：

<code class="html"><head>
  <script>
    // Place this in <HEAD> top before other tags
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>

  <!-- meta, title, etc... -->
</head></code>

登录后复制

随后，建议将任何其他脚本放置在非渲染阻塞方式，就在关闭之前标签。这将防止他们中断主题分配过程：

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> and </html> go 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