CODEWITHSUNDEEP
javascripthtmlcsscolors
Sam
Sam

Reputation: 15518

How to setup a simple color scheme via CSS Root Variables?

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>

Upvotes: 1

Views: 1879

Answers (1)

jsejcksn
jsejcksn

Reputation: 33901

There are three problems to address in your JavaScript code:

  1. 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().

  2. 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.

  3. 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>

Upvotes: 4

Related Questions