Ändern von CSS-:Root-Farbvariablen in JavaScript

Im Bereich der Webentwicklung erfolgt die Anpassung der visuellen Ästhetik einer Webseite oft durch die Verwendung von CSS-Variablen. Diese im :root-Abschnitt des CSS definierten Variablen ermöglichen es Entwicklern, verschiedene Aspekte des Designs zu steuern. Ein häufiges Szenario ist die Möglichkeit, diese Farben mithilfe von JavaScript dynamisch zu ändern.

Um dies zu erreichen, lautet der Schlüsselcode:

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

Diese Zeile ändert im Wesentlichen die angegebene CSS-Variable im Abschnitt :root und aktualisiert ihren Wert auf die gewünschte Farbe. Wenn Sie beispielsweise die Variable --main-color in Schwarz ändern möchten, verwenden Sie den folgenden Code:

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

Anwenden dieses Codes auf das in der Frage bereitgestellte Beispiel:

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

Dieser aktualisierte Code ändert erfolgreich die Variable --main-color und ändert dynamisch die Farben auf der Webseite, wenn auf eine Schaltfläche geklickt wird.