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