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

Question

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>

Should 'change' be 'click' ? But then still it does not work. This is a tough one for me. — Sam
– Sam, Commented May 27, 2022 at 22:32

jsejcksn · Accepted Answer · 2022-05-27 22:30:20Z

4

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>

answered May 27, 2022 at 22:30

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Sam Over a year ago

Awesome! Thanks for the clarity of the three problems. I will now investigate them one by one. And thank you for the working solution!

Sam Over a year ago

I also figured that by adding :root, in the beginning of the desired default color scheme, that scheme will be loaded by default, if no scheme is set yet.

Sam Over a year ago

I wonder, would it be possible to have a theme called :root.default {} in the CSS, and have the Javascript code to load the "default" theme if nothing is set yet?

jsejcksn Over a year ago

@Såm You are always welcome to ask a new question if you have one.

Sam Over a year ago

Roger that, I will :)

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related