DEV Community

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

Michael "lampe" Lazarski on September 08, 2019

What is CSS Quickes? I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?" In "CSS Quickies"...

Read full post

Chris Achard • Sep 8 '19

YES! I first ran across native CSS variables about a month ago, and was super excited - finally variables come to CSS without a preprocessor! This post is a nice example of where they can be used. Thanks!

(for those curious, here's where you can check what browsers support css variables: caniuse.com/#feat=css-variables)

Tobias Buschor • Sep 9 '19

And for IE11 i made this polyfill (linked on caniuse)
github.com/nuxodin/ie11CustomPrope...

Michael "lampe" Lazarski • Sep 9 '19

Nice I will check it out later 👍😊

Chris Achard • Sep 9 '19

Oh, nice!

Tobias Buschor • Sep 9 '19

Thanx.
Here the Demo in IE11 with just adding the polyfill:
jsbin.com/pofetiyaha/1/edit

Michael "lampe" Lazarski • Sep 8 '19

They are really awesome!

Oh, good point! I should have included the caniuse link! They are for me just so integral and normal to use that I don't even think about that there can be some issues with older browser 🙈

Nick Taylor • Sep 8 '19

Even DEV uses CSS variables for theming. 🔥 It goes through SASS, but there is a mixin for generating theme styles via CSS properties.

Eugene Vedensky • Sep 9 '19

That's a cute mixin.

Michael "lampe" Lazarski • Sep 8 '19

Oh cool, I didn't know that :)

I really need to look some time into the dev.to code 😀🖖

But yeah I think SASS and LESS have some sort of plugins that let you write CSS variables :)

Simon Coudeville • Sep 16 '19

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?

Michael "lampe" Lazarski • Sep 16 '19 • 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.

Simon Coudeville • Sep 16 '19

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. */
}

Michael "lampe" Lazarski • Sep 16 '19

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.

Shamima Hossain • Sep 8 '19

Thank you so much, I was recently struggling to make a switch like that and just couldn't wrap my head around making one. I would like to implement your approach to creating one for my project heavily inspired from this if you don't mind. Also I'm glad I learnt about CSS variables along the way.

Michael "lampe" Lazarski • Sep 8 '19

Hey glad i could help!

Of course, you can use it :)

And drop a link here in the comments to your project so I and other people can see it ✌😀

Aquarius.Academy • Sep 9 '19

Awesome!! So happy this is native now! Could use a proofread for email grammar, but good article.

Michael "lampe" Lazarski • Sep 9 '19

Thanks.👍😊

BTW I used grammerly pro for checking 😉

Aquarius.Academy • Sep 9 '19

"I will explain one CSS property in deep." You mean to say "depth" in place of "deep".

"Now this would produce our desired outcom." The word is "Outcome", outcom isn't a word.

"Puh this is a lot of code" I'm not sure "puh" is a word.

There was at least one more too.

Michael "lampe" Lazarski • Sep 9 '19

Thanks, I changed it.

"puh" is a thing in Germany :D

I was thinking that Grammarly would find stuff like that.

Aquarius.Academy • Sep 9 '19

I would too! Glad to help, thanks again for the article!! Awesome news!!!!

Michael "lampe" Lazarski • Sep 9 '19

Thank you 👍 ☺️

tiranorod • Sep 14 '19 • Edited

I still didn't get why set other custom properties inside .theme-container and .theme-container.light... wouldn't be easier to use the custom properties in the :root throughout your stylesheet or did the local custom properties of those divs had another function that I didn't get? Nice post! Keep tem coming! I believe you'll need more than one quickie to talk about grid though lol cheers!