暗黑模式重新加载时会闪烁白色背景一毫秒

Question

暗黑模式重新加载时会闪烁白色背景一毫秒

16

我正在尝试在我的应用程序中添加黑暗模式功能。它使用本地存储来存储用户的偏好设置以供将来使用。因此，现在的问题是当启用黑暗模式并且页面由于某些原因重新加载时（例如，如果用户故意重新加载页面或提交表单），则页面上会出现白色背景的闪烁，在变成黑暗之前停留了几分之一秒。这看起来不太专业。

目前还没有找到解决办法，请帮帮我。

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);

: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;
}

<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>                     
</table>

- Zak

3

很可能是因为JavaScript尚未加载并执行检查。因此，页面以正常模式加载，JS初始化，设置暗模式，然后再更改。 - Emre Koc

1

@EmreKoc所说的是正确的。我建议将主题检测脚本放在页面的最前面之一。除此之外，在导航时不要重新加载整个页面 - 只需使用ajax请求替换已更改的部分。 - MauriceNino

3

将设置暗色模式的代码部分以渲染阻塞方式移至文档的<head>标签内，其余脚本像往常一样放置在结束的</body>标签之前。这样，浏览器将停止在头部解释JS代码，并为您的<html>标签分配所需的data-theme属性。 - Roko C. Buljan

2

@RokoC.Buljan是正确的。但是，考虑到您的querySelector，如果您要优先加载此脚本，则可能需要事件委托。 - 95faf8e76605e973

你们能用英语说话吗？:( 有人能帮我把代码放到正确的位置吗？我不是专家。 - Zak

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

最理想的做法是通过在文档的标签内放置一个小的