Темный режим мерцает белый фон за миллисекунду при перезагрузке ⇐ Html

[Anonymous]

Я пытаюсь добавить эту функцию темного режима в моем приложении. Он использует LocalStorage для хранения предпочтений пользователя для будущего использования. Таким образом, проблема сейчас в том, когда режим Темного, и страница по какой -то причине перезагружена, например. Если пользователь преднамеренно перезагружает страницу или представляет форму, то по всей странице будет мерцание белого фона, прежде чем она станет темной. Это остается доля секунды. Это просто не выглядит профессионально. < /P>
еще не нашел решения. Так что, пожалуйста, помогите мне. < /P>
ps. Приведенный ниже фрагмент ниже не будет работать здесь, так как код включает в себя LocalStorage < /code> объект.

Код: Выделить всё

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);  < /code>
: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;
}< /code>

Dark Mode







Header 1
Header 2
Header 3




Alfreds Futterkiste
Maria Anders
Germany

Подробнее здесь: https://stackoverflow.com/questions/630 ... -on-reload