Modification des variables de couleur CSS : racine en JavaScript

Dans le domaine du développement Web, la personnalisation de l'esthétique visuelle d'une page Web se fait souvent via l'utilisation de variables CSS. Ces variables, définies dans la section :root du CSS, permettent aux développeurs de contrôler divers aspects de la conception. Un scénario courant est la possibilité de modifier ces couleurs de manière dynamique à l'aide de JavaScript.

Pour y parvenir, l'élément de code clé est :

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

Cette ligne modifie essentiellement la variable CSS spécifiée dans la section :root, en mettant à jour sa valeur avec la couleur souhaitée. Par exemple, si vous souhaitez modifier la variable --main-color en noir, vous utiliserez le code suivant :

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

Application de ce code à l'exemple fourni dans la question :

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");
  }
}

Ce code mis à jour modifie avec succès la variable --main-color et change dynamiquement les couleurs de la page Web lorsqu'un bouton est cliqué.