Как отредактировать переменную CSS с помощью JavaScript? ⇐ Jquery

[Anonymous]

У меня есть эти переменные CSS для управления цветами моего проекта, поэтому я могу использовать темы.

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

html {
--main-background-image: url(../images/starsBackground.jpg);
--main-text-color: #4CAF50;
--main-background-color: rgba(0, 0, 0, .25);
--beta-background-color: rgba(0, 0, 0, .85);
}

Однако, как бы я ни пытался изменить атрибут (две строки с комментариями пробовались отдельно), самое близкое, что я получаю, — это возвращение недопустимого атрибута.

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

function loadTheme() {
var htmlTag = document.getElementsByTagName("html");
var yourSelect = document.getElementById("themeSelect");
var selectedTheme = (yourSelect.options[yourSelect.selectedIndex].value);
// htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
// $("html").css("--main-text-color", "#FFCF40");
}

сообщение об ошибке

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

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '--main-text-color' is not a valid attribute name.
at loadTheme (http://localhost/js/custom.js:262:16)
at HTMLButtonElement.onclick (http://localhost/:114:43)