CODEWITHSUNDEEP
sassangular-materialangular-material-theming
tsimon
tsimon

Reputation: 8010

How do you change the global shadow colour in Angular Material

Edit: I have created a StackBlitz with a custom theme here: https://stackblitz.com/edit/material-shadow-demo

I would like to change the shadows across an entire Angular material theme. Please note that this is not the same as changing the shadow under a specific element, e.g. a card, which has been asked elsewhere.

I know that the functionality exists, but I haven't been able to implement it. The original issue and implementation can be seen here: https://github.com/angular/components/issues/11343

My issue is that I have a very rudimentary understanding of Sass mixins, so even though I think the answer to my question is presented, it's not done so in a way that I understand.

Towards the bottom of that issue, it says that I can do themed elevations using the following code:

@import '~angular/material/theming';

$myTheme: ...

@mixin my-elevation($zValue) {
  @include mat-theme-elevation($zValue, $myTheme);
}

Could anybody please a slightly more detailed example of how I might make all of the shadows a different colour? And if it helps at all, here's a link to the diff of the elevation.sass file: https://github.com/benelliott/material2/commit/73bcbd1cfad94077f77324b66712730492f4817a#diff-218a5cec8571848c0a4784fe7b90b2ce5f9eb29c040e9b9dfd1b0f82731d4381

Upvotes: 0

Views: 212

Answers (1)

SwankTheTank
SwankTheTank

Reputation: 1137

Looks like you are pretty close. I haven't played with angular in some time so this may be incorrect but appears to work in your playground provided.

I was getting undefined from your custom mixins but the larger issue is you were not calling your mixins, only defining them.

Below I consolidated your mixins to a loop redefining all of the shadows that material offers globally.

@mixin custom-theme-elevations() {
  @for $i from 0 through 24 {
    .mat-elevation-z#{$i} {
      @include mat.elevation($i, rgba($custom-shadow-color, $custom-shadow-opacity));
    }
  }
}

@include mat.color-variants-backwards-compatibility($theme);
@include mat.core();
// call your mixin here
@include custom-theme-elevations();

here's your sandbox updated. Can see a red shadow on the menu text using mat-elevation-z2

updated stackblitz per comments:

Upvotes: 1

Related Questions