Having multiple themes with custom colors for Angular Material and custom components

Question

I'd like to have a few themes in my app, but along with Angular Material themes I also want to define custom colors that are used by specific components and elements that aren't part of Angular Material. Whenever I change a theme those custom colors should be changed as well. Let's say I have a file that defines colors for each theme, then I'd like to import it in an arbitrary scss file and utilize the colors to style some elements

@import "custom-colors"

.my-elem {
 color: $textColor;
}

Then, if I need to change a theme I would apply a specific class to the outer most container of the app, and after this I'd like $textColor to have another value, so that color of the .my-elem would change.

Is there any way of doing this without writing something like

.another-theme {
 .my-elem {
   color: $textColorOfAnotherTheme;
 }
}

In every component that should be affected by theme changing?

Answer 1

There are 2 ways to change themes
1. Adding parent class to your root component
2. Changing file name (As angular material done)

1. You can add css with parent class (Example below)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

and when user change theme, you can change class on your root element <app-component class="light">

There are various ways to do it: Having global varible , Using Event Emitter

2. Changing file names, same file without parent class will be divided into light.css and dark.css

and upon user changing theme, you can replace <link ref="stylesheet" href="light.css">

Angular way of doing this is, using Rendere 2 Set Attribute