Themed Styles With CSS Variables

If you worked with a tool like SASS/LESS to gain themes support in your apps, you must know that this is not an easy task.

CSS variables, or more accurately, as they are called in the spec, CSS custom properties, can be useful for creating themes.

This will not be an introduction to CSS variables; you can read more about them here.

💪 The power of CSS variables 💪

The ability to change variables at runtime

We can define different values for every theme. Now the only thing to do is to apply the class to our body in runtime with JavaScript, and we are done.

Currently, we have great support for CSS variables except for IE as usual.

You can play with code here.

Follow me on Medium or Twitter to read more about Angular, Vue and JS!