DEV Community

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

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"...
Collapse
 
chrisachard profile image
Chris Achard

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)

Collapse
 
nuxodin profile image
Tobias Buschor

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

Collapse
 
chrisachard profile image
Chris Achard

Oh, nice!

Thread Thread
 
nuxodin profile image
Tobias Buschor

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

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Nice I will check it out later 👍😊

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

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 🙈

Collapse
 
nickytonline profile image
Nick Taylor

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

Chameleon

Collapse
 
ggenya132 profile image
Eugene Vedensky

That's a cute mixin.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

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 :)

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.

Collapse
 
shamimahossai13 profile image
Shamima Hossain

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.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

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 ✌😀

Collapse
 
academyaquarius profile image
Aquarius.Academy

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

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thanks.👍😊

BTW I used grammerly pro for checking 😉

Collapse
 
academyaquarius profile image
Aquarius.Academy

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

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Thanks, I changed it.

"puh" is a thing in Germany :D

I was thinking that Grammarly would find stuff like that.

Thread Thread
 
academyaquarius profile image
Aquarius.Academy

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

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you 👍 ☺️

Collapse
 
tiranorod profile image
tiranorod • 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!

Collapse
 
dbarwikowski profile image
Daniel Barwikowski

What is .slider.round:before style for?
For me page looks the same with and without it

Collapse
 
prateekarora profile image
Prateek Arora

great work

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you, much appreciated.

Have a great week!