DEV Community

Don't miss out on css variables

Tim Deschryver on July 01, 2019

At first when I heard of css variables when it was introduced, I was a bit skeptical. Why would anyone use it if there are extension languages as s...

Read full post

Ben Halpern • Jul 1 '19

Without CSS variables, DEV probably wouldn’t have themes, and some folks really like their dark mode 😄

Tim Deschryver • Jul 1 '19 • Edited

And we thank you and the whole team for these awesome themes 🤩

STEN • Jul 2 '19

Where can I toggle the dark mode? I can't find that option(I'm using the PWA version of DEV on my phone).

Eugene Karataev • Jul 4 '19

Settings -> misc -> style customization

STEN • Jul 5 '19

That's dope!

Cosmas Gikunju • Nov 19 '19

There's dark mode? been here since January and never noticed it 😂😂😂. just found it pretty deep in settings, would be nice to have a toggle where its better accessible.

yevgalis • Jul 1 '19

CSS variables are great! Support is very good - all modern browsers support them. Well, except we know what browser 😅

2pi.pl • Jul 4 '19

From my point of view it's useless as long as IE11 is still used :(

yevgalis • Jul 5 '19 • Edited

In that case a lot of features are useless. Personally, if it's not absolutely necessary to support IE11 in a project, than I'm not thinking about it :)

Also you can provide (not always) a fallback for IE like this:

:root {
  --foreground-color: #333333;
  --background-color: #ffffff;
}

body {
  background: #ffffff;
  background: var(--background-color);
  color: #333333;
  color: var(--foreground-color);
}

Tim Deschryver • Jul 5 '19

That's a great tip, thanks for sharing!

2pi.pl • Jul 5 '19 • Edited

Unfortunately about 8% of the web users are still using IE11 and other browsers not supporting css vars. It depends on your company's policy if you need to take care about those users or not - we have to :(
Of course - it's good to know about "new" things but using them it's unfortunately other thing.
This fallback is good for simple cases, but if you'd like to change the value of the --background-color using javascript, simply changing the --background-color variable the colors won't change it in IE.

yevgalis • Jul 6 '19

I understand that the fallback I mentioned before is not gonna solve the inability to change CSS variables using JS. It just can be used for simple cases.

It's sad that we still have to support IE11. Microsoft created a burden for the web community. And IE11 is holding back the progress :(

But on the other hand, imagine the day when IE11 will be gone! It's gonna be the biggest worldwide party in the history :D

Tobias Buschor • Jul 4 '19

I made a polyfill to target IE11
Maybe someone can use it:
github.com/nuxodin/ie11CustomPrope...

Tim Deschryver • Jul 4 '19

Awesome work Tobias! 👌

Dor Shinar • Jul 1 '19

Great article, definitely learned something new here. I'm still not convinced though - how are variables transferred from one stylesheet to another? Say I scope my CSS for individual components (like in react), does it offer seamless integration like other tools already available?
If I have to edit the styles from JS whenever an event fires, why not go full blown CSS-IN-JS?

Tim Deschryver • Jul 1 '19

I'm afraid that I'm not the best to answer these questions, as I'm not really familiar with react and css-in-js.

But you can override css variables from another stylesheet in your own stylesheet, which could be useful.

Timothy Foster • Jul 1 '19

Oh my goodness, I hadn't realized you can access these variables with JS. Thanks for sharing!

Tim Deschryver • Jul 1 '19

When I encountered it I had the urge to write about it 🙂
I'm glad that this post was useful!

Andrew Evans • Jul 2 '19

This is so cool!

Frederik Vantroys • Jul 4 '19

Very nice article. Tnx Tim ... Javascript API was new to me too ...

Tim Deschryver • Jul 4 '19

Thanks Frederik, I'm glad you like it 😊

Theo M. • Jul 3 '19 • Edited

My life just changed reading this! Eye opening! I always wondered how to do themes? This answers my questions for sure! And JS API on top of it... I am blown away!