暗模式在重新加载时闪烁白色背景一毫秒 [英] Dark mode flickers a white background for a millisecond on reload
问题描述
我正在尝试在我的应用程序中添加此黑暗模式功能.它使用本地存储来存储用户的首选项，以备将来使用.所以现在的问题是，启用暗模式后，由于某种原因重新加载了页面，相同的是用户有意重新加载页面或提交表单，然后在页面变成白色之前，整个页面都有白色背景闪烁黑暗的.它只停留了不到一秒的时间.看起来并不专业.
I am trying to add this dark mode feature in my app. It uses localstorage to store the user's preference for future usage. So the problem now is when the dark mode is enabled, and the page is reloaded for some reason, same the user deliberately reloads the page, or submits a form, then there's a flicker of white background all over the page before it turns to be dark. It stays a fraction of a second. It just doesn't look professional.
尚未找到任何解决方案.所以请帮帮我.
Haven't found any solution yet. So please help me out.
PS.下面的代码段在SO中无法正常工作，因为该代码包含 localStorage 对象.
PS. The snippet below won't work here in SO as the code includes localStorage object.
这是代码:
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>推荐答案
最好在内部放置一个小的< script> 标签来阻止页面呈现文档的< head> .这样，渲染器应停止调用JavaScript解释器，将 data-theme 属性分配给< html> ，然后在左侧继续.试试看:
It would be ideal to block the page rendering by placing a small <script> tag inside the <head> of your Document. By doing so the renderer should stop to call the JavaScript interpreter, assign the data-theme attribute to <html> and than continue where left. Give it a try:
将此< script> 放置在< head> 内-甚至在< link> 或< style>之前; 标记:
Place this <script> inside <head> - even before the <link> or <style> tags:
<head>
<!-- meta, title etc... -->
<script>
// Render blocking JS:
if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
</script>
<!-- link, style, etc... -->
</head>
然后，在结束标记之前 之前，以非渲染阻止方式使用所有其他脚本:
Than, right before the closing </body> tag use all the other scripts in a non-render-blocking manner:
<!-- 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 -->
这篇关于暗模式在重新加载时闪烁白色背景一毫秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
