DEV Community

Discussion on: CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily

Collapse
 
simoncoudeville profile image
Simon Coudeville

Great article! I'm adding this to my students reading list this year. In your demo I don't think you need to set the background of .theme-container.light to var(--c-background) again. Or am I missing something?

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski • Edited

I think you are talking about this example:

.theme-container.light {
  --c-background: var(--c-light-background);
  --c-checkbox: var(--c-light-checkbox);
  background: var(--c-background);
}

So this is the .theme-container and yeah here it looks confusing but imagines you have a bigger app and want to use the right background again.

.theme.container .button {
  background: var(--c-background);
}

As you can see here you would use --c-background because you have set it up in the container with --c-background: var(--c-light-background);

This makes the code more extendable. Think now you would have a 3 or 4 or 5 theme you would only need to change the code in one place. .theme-container.<THEME NAME>.

so you can have a solarized theme or a pink theme and so on.

Collapse
 
simoncoudeville profile image
Simon Coudeville

Yeah I get that. I'm talking about the background property on .theme-container.light. I commented out to show what I mean.

.theme-container {
  --c-background: var(--c-dark-background);
  --c-checkbox: var(--c-dark-checkbox);
  background: var(--c-background);
  background-blend-mode: multiply,multiply;
  transition: 0.4s;
}
.theme-container.light {
  --c-background: var(--c-light-background);
  --c-checkbox: var(--c-light-checkbox);
  /* background: var(--c-background); */
  /* I don't think this rule is necessary since you already set it on the main .theme-container. */
}
Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Ahh okay!

Now I understand.

There is no technical reason for that.

It is just to make it more clear to other people what is going on here.