css - Angular material Sass get styles dynamically via map-get and dark theme on global scss files

Question

I have implemented dark theme in my Angular application. It's done via Service and adds or remove a class to the document body.

this.renderer.addClass(document.body, 'color-scheme-dark');

Styles.scss is including the material theme according to the class:

@include angular-material-theme($app-theme);

.color-scheme-dark {
  @include angular-material-theme($dark-theme);
}

Everything is working and angular sets the dark theme only if i'm passing the dark scheme class. However, Issue is that i have global styles scss folders, Which applying the styles according to the light theme:

.app-hr {
  color: map-get($app-foreground, border);
}

But the correct result is to take the (app-dark-doreground,border) if the class is dark. I have tried to do something like the code below,But failed:

.app-hr {
  color: map-get($app-foreground, border);
}

.color-scheme-dark {
  color: map-get($app-dark-foreground, border);

}

So I have few Scss files that gets the colors from the pallet but i can't change them dynamically by the class i have added. What can i do next to change them? Thanks.

question from:https://stackoverflow.com/questions/66051651/angular-material-sass-get-styles-dynamically-via-map-get-and-dark-theme-on-globa

Answer 1

So here is how i've solved this. Inside the global-styles.scss, I made a mixin with a variable $theme:

@mixin toolbar-style($theme) {
  mat-toolbar {
    background-color: map-get($theme, toolbar-background)
  }
}

And inside the styles.scss, I'm including the relevant mixin with the correct theme, According to the class.

@include toolbar-style($app-foreground);

.color-scheme-dark {
  @include toolbar-style($mat-dark-theme-foreground);
}