CODEWITHSUNDEEP
cssangularsassangular-materialscss-mixins
Or05230
Or05230

Reputation: 83

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

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.

Upvotes: 2

Views: 1399

Answers (1)

Or05230
Or05230

Reputation: 83

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

Upvotes: 0

Related Questions