Angular: theme switcher

Question

We have done theme switching in the past. In Angular 1.5 we had 3 css files. The main layout file and 2 color css files. When user selected a theme we would apply the proper color css file to change the theme.

Now in Angular 2+ we are using sass and each component has its own styles. We cannot use the same approach of having a 'color' css file for each theme.

What is the approach in Angular 2+ for switching themes when each component has its own css file. I assume there is a way to tell each component to switch to a theme color selector? Any guidance is appreciated, thank-you

Answer 1

You probably want to do Sass mixins based on the current theme. Look at how material theming works.

At the root of your project, you can have a theming.scss file which uses mixins to set up different themes based on a class. You can then easily change the theme by changing the class.