Multiple CSS Themes In Angular
Hello there, I hope you are doing well.
Nowadays, many of the web applications are offering multiple color themes for their users. The recent example we can take is stackoverflow.com.
Many of the developers were waiting for their favorite dark mode for their favorite place on the internet. I have also tried to do so in one of my angular projects. Today I’ll tell you about it.
It’s all the magic of CSS variable property. CSS has provided us a feature called var(), which allows us to runtime change properties of our CSS elements. The var() function in CSS is used to insert a value for the custom property.
syntax
var( custom_property, value )
where:
custom_proprty
is the name of custom property must start with two dashes (- -), which is mandatory.
value
is the optional parameter, which is used if the custom property is invalid.
You can use this magic with your SCSS file and any non-angular project where CSS or SCSS is used.
Please check out angular code -
Live demo -
