template/exemple/scripts/app.js

// Get the CSS root element
const rootCSS = document.querySelector(':root');

// Create a function for getting a variable value
function CSSgetSombre() {
  let rs = getComputedStyle(rootCSS);
  alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre'));
}

function CSSsetSombre(vr, vg, vb) {
  // Couleur
  rootCSS.style.setProperty('--r-sombre', vr);
  rootCSS.style.setProperty('--g-sombre', vg);
   rootCSS.style.setProperty('--b-sombre', vb);
  // Logo
  // let logo = document.querySelector('header>#logo>svg');
  // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')';
}

function CSSsetClair(vr, vg, vb) {
  // Couleur
  rootCSS.style.setProperty('--r-clair', vr);
  rootCSS.style.setProperty('--g-clair', vg);
  rootCSS.style.setProperty('--b-clair', vb);
}

function CSSswitchCouleurTexte() {
  let rs = getComputedStyle(rootCSS);
  let actuel = rs.getPropertyValue('--couleur-texte');
  if (actuel == 'black')
    rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)');
  else
    rootCSS.style.setProperty('--couleur-texte', 'black');
}

function CSSsetTheme(valeur) 
{
    switch(valeur){
        case 'blue':
            CSSsetClair(245,245,240);
            CSSsetSombre(0,0,245);
        break;
        case 'red':
            CSSsetClair(245,245,240);
            CSSsetSombre(245,0,0);
        break;
        default:
            CSSsetClair(245,245,240);
            CSSsetSombre(0,0,0);
    }
}