首页 > web前端 > css教程 > 如何消除页面重新加载时的暗模式闪烁?

如何消除页面重新加载时的暗模式闪烁?

Mary-Kate Olsen
发布: 2024-11-03 10:40:03
原创
404 人浏览过

How to Eliminate Dark Mode Flickering on Page Reload?

深色模式在重新加载时闪烁白色:阻止渲染以实现无缝过渡

使用本地存储时,会出现页面重新加载时深色模式闪烁的问题保留用户偏好。要解决此问题,建议首先阻止页面渲染,然后应用主题首选项。

解决方案:阻止页面渲染

中实现这个小脚本;任何其他标签之前的部分:
<code class="html"><script>
  // Set this in <HEAD> top before any other tag.
  const setTheme = (theme) => {
    theme ??= localStorage.theme || "light";
    document.documentElement.dataset.theme = theme;
    localStorage.theme = theme;
  };
  setTheme();
</script></code>
登录后复制

此脚本根据本地存储初始化主题或默认为“light”。

非阻塞脚本

将所有其他脚本放在结束 之前以非渲染阻塞的方式标记:

<code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>
登录后复制

index.js中的自定义

在index.js文件中,处理主题切换:

<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>
登录后复制

此代码在切换复选框时更新主题。您也可以将此脚本放置在单独的 JS 文件中。

通过实施这些更改,页面渲染最初将被阻止,从而可以立即设置主题首选项。这消除了白色闪烁效果,并提供明暗模式之间的无缝过渡。

以上是如何消除页面重新加载时的暗模式闪烁?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板