My app has multiple theme files, and I select the theme during runtime.
.client1-theme{
// @include angular-material-theme($client1-theme);
@include all-component-colors($client1-theme);
@include theme-color-grabber($client1-theme, $client1-alternate);
@include status-background($client1-theme);
@include spinner-color($client1-theme);
}
.client2-theme{
@include all-component-colors($client2-theme);
@include theme-color-grabber($client2-theme, $client2-alternate);
@include status-background($client2-theme);
@include spinner-color($client2-theme);
}
I have a set of SCSS variables stored in another file colors.scss where I define variables like
$primary: mat-color($client1-primary);
$accent: mat-color($client1-accent);
$alternate: mat-color($client1-alternate);
This setup allows me to import the colors.scss file in my components and use the variables in the component's SCSS file.
Now, for each theme selection, I need to change these variable values. For example, for client2-theme, the variables should be:
$primary: mat-color($client2-primary);
$accent: mat-color($client2-accent);
$alternate: mat-color($client2-alternate);
The goal is for the component's SCSS file to use the correct colors/variable values based on the selected theme. I've tried defining global classes through mixins, but that doesn't allow me to use @extend in the component file.
Any suggestions on how this could be achieved?
Thanks