Mem*_*ord 7 html javascript css fouc
我正在尝试添加一个简单的亮/暗模式切换到我的Jekyll网站.
我现在设置它的方式是,正文有一个dark类切换到light切换类,并且localStorage只要用户进入新页面,主题就会保留并加载.该SCSS只是有选择的.dark,并.light会显示相应的配色方案.
这种方法的问题是我的默认主题是dark,所以如果主题被设置为,当light类切换dark到light我加载新页面时,有一个非常清晰的.2秒闪存.
我已经尝试通过设置主体visibilty来解决问题,hidden然后visible在切换完成后重新设置它,但遗憾的是这种方法引入了另一个恼人的闪存/延迟,并且没有好办法阻止它在每个页面加载时闪烁.
我想到的一些潜在解决方案,但不知道它们是否可行或如何实现它们是:
localStorage和更改基于它的呈现HTML的类(可能是最好的解决方案,但也可能不可能)不知何故让Jekyll从SCSS生成两个单独的样式表,并使用JS来选择正确的样式表
非常感谢有关如何做这些事情或潜在替代解决方案的任何见解,谢谢!
小智 7
所以分解一下：
我认为使用静态站点生成器意味着从 localStorage 读取并使用 Javascript 应用主题类是一种非常好的方法。在我看来，有两种可能的方法可以最大程度地减少闪烁问题，而无需更改 Jekyll 站点的架构。
随着页面内容的加载，尽快执行 Javascript：
因为唯一需要加载的 DOM 元素是<html> 元素本身，您可以对其应用主题类，所以您可以将“关键”Javascript 放在<head>. 即只是“主题切换”代码行。
然后它应该在内容加载之前立即执行。
使用 CSS 过渡来最小化 flash 本身：
您可以在<html>元素没有主题类时隐藏页面内容，并在应用后淡入淡出，如下所示：
html {
opacity: 0;
transition: opacity 1s;
}
html.light, html.dark {
opacity: 1;
}