How to set (and remember) color scheme via CSS Root Variables?

May 28, 2022

I would like to set the color scheme based on simple CSS root variables.
The JavaScript does not work: it does not see/set the root variables when one of the options are clicked. What have I overlooked to make this simple color scheme work?

const setTheme = theme => document.documentElement.className = theme;
document.getElementById('themeoptions').addEventListener('change', function() {
    setTheme(this.value);
});

#themeoptions p{ /* User Interface */
  display: inline-block;
  text-decoration: underline;
}#themeoptions p:hover{cursor: pointer}


:root.light {
  --bgr: #ddc;
  --txt: #456;
}
:root.dark {
  --bgr: #222;
  --txt: #844;
}
:root.blue {
  --bgr: #046;
  --txt: #dde;
}


body {
  background-color: var(--bgr);
  color: var(--txt);
}

<div id="themeoptions">
    <p value="light">Light</p>
    <p value="dark">Dark</p>
    <p value="blue">Blue</p>
</div>

<h1>Click on a theme to change the color scheme!</h1>

>Solution :

There are three problems to address in your JavaScript code:

The value property on an element does not refer to the attribute that you have named value on your paragraph elements. To access the value of this property, you’ll need to use Element.getAttribute().
this in your event listener callback function does not refer to the target element of the event. To access the target element, you’ll need to use Event.target.
The event that you want to listen for is most likely the click event (not the change event).

const setTheme = theme => document.documentElement.className = theme;
document.getElementById('themeoptions').addEventListener('click', ({target}) => {
  setTheme(target.getAttribute('value'));
});

#themeoptions p{ /* User Interface */
  display: inline-block;
  text-decoration: underline;
}#themeoptions p:hover{cursor: pointer}


:root.light {
  --bgr: #ddc;
  --txt: #456;
}
:root.dark {
  --bgr: #222;
  --txt: #844;
}
:root.blue {
  --bgr: #046;
  --txt: #dde;
}


body {
  background-color: var(--bgr);
  color: var(--txt);
}

<div id="themeoptions">
    <p value="light">Light</p>
    <p value="dark">Dark</p>
    <p value="blue">Blue</p>
</div>

<h1>Click on a theme to change the color scheme!</h1>