Alterando CSS: variáveis ​​​​de cor raiz em JavaScript

No domínio do desenvolvimento web, a personalização da estética visual de uma página web geralmente é realizada por meio de o uso de variáveis ​​CSS. Essas variáveis, definidas na seção :root do CSS, permitem que os desenvolvedores controlem vários aspectos do design. Um cenário comum é a capacidade de alterar essas cores dinamicamente usando JavaScript.

Para conseguir isso, o código-chave é:

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

Esta linha essencialmente modifica a variável CSS especificada na seção :root, atualizando seu valor para a cor desejada. Por exemplo, se você quiser alterar a variável --main-color para preto, você usaria o seguinte código:

document.documentElement.style.setProperty('--main-color', '#000000');

Aplicando este código ao exemplo fornecido na pergunta:

function setTheme(theme) {
  if (theme == 'Dark') {
    localStorage.setItem('panelTheme', theme);
    $('#current-theme').text(theme);
    document.documentElement.style.setProperty('--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");
  }
}

Este código atualizado modifica com sucesso a variável --main-color e altera dinamicamente as cores da página da web quando um botão é clicado.