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

[Гость]

В настоящее время я создаю веб-сайт-портфолио с использованием 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». Я все еще новичок в веб-дизайне и не совсем понимаю, что делаю, поэтому буду признателен за любую помощь. Также, если мне нужно что-то уточнить, спрашивайте!

Изменить: Я решил пойти в другом направлении по этой проблеме и полностью обновил работу кнопок светлого и темного режимов. Я перешел на использование кнопки, а не флажка, и теперь у меня нет отдельной страницы CSS для темного режима, и вместо этого он меняет корневые переменные с помощью класса темного режима. Тем не менее, я все еще получаю ту же ошибку: он загружает и мигает светлый режим, а затем быстро переключается в темный режим, но мне кажется, что теперь это немного менее заметно? Всем спасибо за помощь, если есть еще идеи, как устранить ошибку, буду очень признателен.

Новый JavaScript:
// проверяем сохраненный «darkMode» в localStorage let darkMode = localStorage.getItem("darkMode"); const darkModeToggle = document.querySelector("#dark-mode-toggle"); const EnableDarkMode = () => { // Добавляем класс в тело document.body.classList.add("темный режим"); // Обновляем darkMode в localStorage localStorage.setItem("darkMode", "включено"); } const DisableDarkMode = () => { // Удаляем класс из тела document.body.classList.remove("темный режим"); // Обновляем darkMode в localStorage localStorage.setItem("darkMode", null); } // Если пользователь уже посетил и включил darkMode // начнем с этого if (darkMode === "включено") { включитьDarkMode(); } // Когда кто-то нажимает кнопку darkModeToggle.addEventListener("клик", () => { // получаем настройку darkMode darkMode = localStorage.getItem("darkMode"); // если он не включен, включите его if (darkMode !== "включено") { включитьDarkMode(); // если он включен, выключаем его } еще { отключитьDarkMode(); } });