Как реализовать переключатель темного режима на HTML-странице, которая сохраняет свое состояние после перезагрузки, а та ⇐ Javascript

[Гость]

В настоящее время я создаю веб-сайт-портфолио с использованием HTML/CSS/JavaScript и изо всех сил пытаюсь найти лучший способ реализовать кнопку темного режима. В моем текущем решении используется отдельная страница CSS, которая меняет значения переменных CSS на цвета темного режима, когда пользователь включает темный режим. Чтобы сохранить это состояние, у меня есть отдельный файл JavaScript, который добавляет логическую переменную в локальное хранилище, называемую dark, и когда пользователь включает ее, логическая переменная устанавливается в значение true. При загрузке страницы JavaScript проверяет, существует ли логическая переменная, и если да, то устанавливает тему соответствующим образом (если false, то сохраните текущую страницу CSS в стиле темы, если true, то используйте dark.css).

Технически это работает. В конце концов, он делает то, что я хочу. На данный момент есть задержка при переходе на отдельные страницы и при перезагрузке страницы. Страница сначала полностью загружается с исходными белыми цветами, затем проверяет локальное хранилище, затем устанавливает стиль темы, а затем снова загружается с темной темой. Поскольку происходит переход от темной темы к вспышке белой темы и обратно к темной теме, это очень раздражает и раздражает, поэтому мне бы очень хотелось, чтобы этого не происходило.

Вот мой текущий код JavaScript:

window.onbeforeprint = darkMode(); функция darkMode() { /*===== Тёмный режим =====*/ let theme = localStorage.getItem('dark'); let element = document.getElementById("theme-style"); // Проверяем, инициализировано ли состояние если (тема != ноль) { УстановитьТема (тема); } // Устанавливаем CSS для таблицы стилей темы функция setTheme(тема) { если (тема === "истина") { element.href = 'assets/css/dark.css'; document.getElementById("darkmode-toggle").checked = true; } еще { element.href = 'assets/css/styles.css'; document.getElementById("darkmode-toggle").checked = false; } } // Если выбран темный режим document.getElementById("darkmode-toggle").onclick = function checkClickFunc() { localStorage.setItem('dark', document.getElementById("darkmode-toggle").checked); if (document.getElementById("darkmode-toggle").checked) { element.href = 'assets/css/dark.css'; } еще { element.href = 'assets/css/styles.css'; } } } Я уже пробовал в Интернете множество различных решений, но ни одно из них пока не помогло. Я пробовал использовать функцию «window.onbeforeprint», пробовал переместить JavaScript в головную часть HTML и пытался установить тип «модуль» вместо «текст/javascript». Я все еще новичок в веб-дизайне и не совсем понимаю, что делаю, поэтому буду признателен за любую помощь. Также, если мне нужно что-то уточнить, спрашивайте!