Angular 材料 Sass 通过全局 scss 文件上的 map-get 和深色主题动态获取 styles

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.

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);
}