如何消除页面重新加载时的暗模式闪烁？
- Mary-Kate Olsen原创
- 2024-11-03 10:40:03383浏览
深色模式在重新加载时闪烁白色：阻止渲染以实现无缝过渡
使用本地存储时，会出现页面重新加载时深色模式闪烁的问题保留用户偏好。要解决此问题，建议首先阻止页面渲染，然后应用主题首选项。
解决方案：阻止页面渲染
在
中实现这个小脚本;任何其他标签之前的部分：<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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn