Comment modifier dynamiquement les variables de couleur CSS :root avec JavaScript ?

Modification des variables CSS :root Color 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, le morceau de code clé est :

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

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

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

Appliquer 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é.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!