Как изменить CSS: переменные корневого цвета в JavaScript ⇐ Html

[Anonymous]

Хорошо, я создаю систему для своей веб -страницы, которая позволяет пользователям изменять тему. То, как я хочу сделать это, имеет все цвета в виде переменных, и цвета установлены в: корневой части CSS. Я посмотрел вверх, как это сделать, но ничего, что я пытался сделать, на самом деле не работало должным образом. Вот мой текущий код: < /p>

css: < /p>

:root {
--main-color: #317EEB;
--hover-color: #2764BA;
--body-color: #E0E0E0;
--box-color: white;
}
< /code>

js: < /p>

(код, чтобы установить тему, она запускается на нажатие кнопки) - я не стал добавлять: root изменение в 2 темаfunction setTheme(theme) {
if (theme == 'Dark') {
localStorage.setItem('panelTheme', theme);
$('#current-theme').text(theme);
$(':root').css('--main-color', '#000000');
}
if (theme == 'Blue') {
localStorage.setItem('panelTheme', 'Blue');
$('#current-theme').text('Blue');
alert("Blue");
}
if (theme == 'Green') {
localStorage.setItem('panelTheme', 'Green');
$('#current-theme').text('Green');
alert("Green");
}
}
< /code>

(код, который запускается при загрузке HTML) < /p>

function loadTheme() {
//Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue.
if (localStorage.getItem('panelTheme') == '') {
setTheme('Blue');
} else {
setTheme(localStorage.getItem('panelTheme'));
$('#current-theme').text(localStorage.getItem('panelTheme'));
}
}
< /code>

показывает оповещение, но на самом деле ничего не меняет. Кто -нибудь может указать мне в правильном направлении?

Подробнее здесь: https://stackoverflow.com/questions/378 ... javascript