Why it’s better to use CSS variables instead of JS variables for theming
Most css-in-js solutions have a theme provider in order to facilitate theming, for example here is styled-component’s, glamorous and emotion’s.
While these solutions are useful, I think a better way of handling theming is to rely on native CSS variables now that support in browsers is pretty good.
If you don’t know much about CSS variables I recommend this article.
By relying on the native variables you don’t need to wrap your app in yet another context provider, you can change them in your devtools and the changes will update everywhere you have used the variables.
For responsive design a major benefit of using CSS variables is the ability to change them based on media queries. I know this is possible also with JS variables but it takes more work.
The example below is using styled-components but you can do this with all css-in-js libraries.
The only major drawback is that today it’s not possible to do color manipulation with pure CSS, but in the future we will have a color-mod function.
As a side note CSS variables are also super nice for animations:
