Функция JS для Darkmode/Lightmode с проверкой значений через локальное хранилище позволяет мне быстро менять цвет при пе ⇐ CSS

[Anonymous]

Я хотел бы добавить кнопку для переключения в темный и светлый режим на своем веб-сайте.
Я использую var() в своем CSS для управления цветом моих элементов.Это мой код:

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

function loadMode() {
const mode = localStorage.getItem('mode');
if (mode === 'dark') {
setDarkMode();
}
}

// set darkmode
function setDarkMode() {
document.documentElement.style.setProperty('--textColor', '#eaeaea');
document.documentElement.style.setProperty('--backgroundColor', '#333333');
document.getElementById('toggleMode').textContent = 'Wechsel zu Lightmode';
localStorage.setItem('mode', 'dark');
}

// set lightmode
function setLightMode() {
document.documentElement.style.setProperty('--textColor', '#313131');
document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0');
document.getElementById('toggleMode').textContent = 'Wechsel zu Darkmode';
localStorage.setItem('mode', 'light');
}

// toggle the color mode
function toggleMode() {
const isDarkMode = localStorage.getItem('mode') === 'dark';
if (isDarkMode) {
setLightMode();
} else {
setDarkMode();
}
}

// event listener for button
document.getElementById('toggleMode').addEventListener('click', toggleMode);

// load mode on site load
loadMode();

Этот скрипт загружается в конце веб-страницы (я знаю, это проблема, но как ее исправить?)
Теперь у меня возникает проблема, которая каждый раз Я перехожу на подстраницу, на которой веб-сайт загружается со светлыми цветами, а затем переключается на темные цвета, что приводит к быстрому, но очень раздражающему эффекту мерцания цвета.
Как я могу это предотвратить форма происходит? Мой сайт построен на PHP, поэтому сеансы могут работать? Или файлы cookie?
Спасибо за помощь!
Я пытался поместить функцию в заголовок, но тогда элемент body не смог принять изменение цвета, потому что Я думаю, что он не загружен, да(?)

Подробнее здесь: https://stackoverflow.com/questions/789 ... rage-gives