web-dev-qa-db-fra.com

Comment changer CSS: les variables de couleur racine en JavaScript

Très bien, je crée un système pour ma page Web qui permet aux utilisateurs de changer de thème. Pour ce faire, je souhaite que toutes les couleurs soient des variables et que celles-ci soient définies dans la partie: racine du CSS.

Ce que je veux faire, c'est changer ces couleurs via JavaScript. J'ai cherché comment faire, mais rien de ce que j'ai essayé n'a fonctionné correctement. Voici mon code actuel:

CSS:

:root {
  --main-color: #317EEB;
  --hover-color: #2764BA;
  --body-color: #E0E0E0;
  --box-color: white;
}

JS:

(Code pour définir le thème, il est exécuté sur le clic d'un bouton) - Je n'ai pas pris la peine d'ajouter: le changement de racine aux 2 autres thèmes car il ne fonctionne pas sur le thème Dark

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

(Code exécuté lors du chargement du code HTML)

function loadTheme() {
  //Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue.
  if (localStorage.getItem('panelTheme') == '') {
    setTheme('Blue');
  } else {
    setTheme(localStorage.getItem('panelTheme'));
    $('#current-theme').text(localStorage.getItem('panelTheme'));
  }
}

Il montre l'alerte, mais ne change rien en réalité. Quelqu'un peut me diriger dans la bonne direction?

javascripthtmlcss
14
Daedalus

Merci @pvg d'avoir fourni le lien. J'ai dû regarder un peu pour comprendre ce qui se passait, mais j'ai finalement compris.

La ligne magique que je cherchais était la suivante:

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

Cela a fait exactement ce que je voulais, merci beaucoup!

32
Daedalus

vieille magie jquery fonctionne toujours aussi

$('#yourStyleTagId').html(':root {' +
    '--your-var: #COLOR;' +
'}');
0
v2p