Cambiar CSS: variables de color raíz en JavaScript

En el ámbito del desarrollo web, personalizar la estética visual de una página web a menudo se logra mediante el uso de variables CSS. Estas variables, definidas en la sección :root del CSS, permiten a los desarrolladores controlar varios aspectos del diseño. Un escenario común es la capacidad de cambiar estos colores dinámicamente usando JavaScript.

Para lograr esto, la pieza clave del código es:

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

Esta línea esencialmente modifica la variable CSS especificada en la sección :root, actualizando su valor al color deseado. Por ejemplo, si desea cambiar la variable --main-color a negro, usaría el siguiente código:

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

Aplicando este código al ejemplo proporcionado en la pregunta:

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 actualizado modifica con éxito la variable --main-color y cambia dinámicamente los colores de la página web cuando se hace clic en un botón.