网站白天or黑夜切换在重新加载时闪烁白色背景的解决思路

一般网站主题设置的白天or黑夜通过js来切换开关，并且通过cookie值来存储当前是白天or黑夜，但是如果网站访问慢的时候，会导致黑夜的时候，网页还没有读取到cookie值的内容，便已经加载了css里面的白色背景，然后读取cookie后再迅速切换到了黑色背景

此时便导致了出现闪烁白色背景的现象

于是通过下面的一篇文章思路尝试这样的解决，下面的文章提到（内部放置一个小的< script> 标签来阻止页面呈现文档的< head>）但是尝试多次，发现还是未能解决，但是白天or黑夜的设置确实已经通过js存储到了localStorage值里面，于是……

在head之前添加了

让data-theme来获取localStorage.theme的白天or黑夜值

然后在把主题里面的css白天和黑夜的背景颜色通过 :root 选择器来赋值，也就是背景颜色会以var(–bg-body)来设置背景色，但是此时var(–bg-body)是未知的颜色

因此加了这一段

[data-theme=“0”] {
–bg-body: #f6f8fb;
–bg-secondary: #fff;
}
[data-theme=“1”] {
–bg-body: #192039;
–bg-secondary: #1f2745;
}
当data-theme的为白天或者黑夜的时候，便开始给var(–bg-body)赋予了颜色值，从而在继续加载css样式的时候才会显示var(–bg-body)已经指定的颜色值，这样就没有了黑夜展示之前的闪烁白色背景了，因为黑夜模式下，白色背景是不存在

但是部分主题只是设置了毕竟明显大部分位置，比如背景，框架背景，头部背景，保证了这部分地方是解决了闪烁白色背景的问题，但是实际上其他的元素，区域还是会有白色的闪烁，只是可能极为短暂，容易忽视掉……

完整代码地址：https://www.dpaoz.com/1177