一般网站主题设置的白天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)已经指定的颜色值，这样就没有了黑夜展示之前的闪烁白色背景了，因为黑夜模式下，白色背景是不存在
但是部分主题只是设置了毕竟明显大部分位置，比如背景，框架背景，头部背景，保证了这部分地方是解决了闪烁白色背景的问题，但是实际上其他的元素，区域还是会有白色的闪烁，只是可能极为短暂，容易忽视掉……
看看以下原文吧
=====================================
以下为转载文章的全文
始于问题：
我正在尝试在我的应用程序中添加此黑暗模式功能.它使用本地存储来存储用户的首选项，以备将来使用.所以现在的问题是，启用暗模式后，由于某种原因重新加载了页面，相同的是用户有意重新加载页面或提交表单，然后在页面变成白色之前，整个页面都有白色背景闪烁黑暗的.它只停留了不到一秒的时间.看起来并不专业.
尚未找到任何解决方案.所以请帮帮我.
PS.下面的代码段在SO中无法正常工作，因为该代码包含 localStorage 对象
const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false); css样式如下
:root {
--primary-color: #495057;
--bg-color-primary: #F5F5F5;
}
body{
background-color: var(--bg-color-primary);
}
[data-theme="dark"] {
--primary-color: #8899A6;
--bg-color-primary: #15202B;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: #fff;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}html页面代码
Header 1 Header 2 Header 3 Alfreds Futterkiste Maria Anders Germany 推荐答案
最好在内部放置一个小的< script> 标签来阻止页面呈现文档的< head> .这样，渲染器应停止调用JavaScript解释器，将 data-theme 属性分配给< html> ，然后在左侧继续.试试看:
将此< script> 放置在< head> 内-甚至在< link> 或< style>之前
然后，在结束标记之前 之前，以非渲染阻止方式使用所有其他脚本
!
发表评论