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

寻梦xunm| 701| 收集

2年前

超过979天温馨提示

本文最后更新于2022年03月18日，已超过979天没有更新，若内容或图片失效，请留言反馈。

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

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

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

在head之前添加了

<script>// Render blocking JS:
if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
</script>

让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页面代码

<div id="dark-mode-button">
    <input id="chck" type="checkbox">Dark Mode
    <label for="chck" class="check-trail">
      <span class="check-handler"></span>
    </label>
</div>

<table class="table">
    <thead>
      <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
      </tr>
    </thead>  
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
    </tbody>

推荐答案

最好在内部放置一个小的< script> 标签来阻止页面呈现文档的< head> .这样，渲染器应停止调用JavaScript解释器，将 data-theme 属性分配给< html> ，然后在左侧继续.试试看:

将此< script> 放置在< head> 内-甚至在< link> 或< style>之前

<head>
  <!-- meta, title etc... -->

  <script>
  // Render blocking JS:
  if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
  </script>

  <!-- link, style, etc... -->
</head>

然后，在结束标记之前之前，以非渲染阻止方式使用所有其他脚本

<!-- other <script> tags here -->

<script>
const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');

if (localStorage.theme) {
  toggleSwitch.checked = localStorage.theme === "dark";
}

function switchTheme(e) {
  const theme = e.target.checked ? "dark" : "light";
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.theme = theme;
}

toggleSwitch.addEventListener("change", switchTheme);
</script>

    
<!-- Closing </body> goes here -->

文章来源：https://www.dpaoz.com/1177

加载教程切换黑夜白天

0 赞 or 打赏

喜欢就打赏一点