CSS Quickies: CSS Variables - Or how you create a ๐ŸŒžwhite/๐ŸŒ‘dark theme easily

lampewebdev 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]
markdown guide
 

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)

 
 

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 ๐Ÿ™ˆ

 

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

Chameleon

 
 

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

 

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?

 

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.

 

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

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.

 

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.

 

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 โœŒ๐Ÿ˜€

 

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

 

Thanks.๐Ÿ‘๐Ÿ˜Š

BTW I used grammerly pro for checking ๐Ÿ˜‰

 

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

Thanks, I changed it.

"puh" is a thing in Germany :D

I was thinking that Grammarly would find stuff like that.

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

 

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!

 
 

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

code of conduct - report abuse