How to merge/overwrite part of a @mixin in material angular theming?

Viewed 846

Assuming there is only 1 line in the _theming.scss of material @angular/material/theming.scss that I would like to overwrite. For example:

//node_modules/@angular/material/theming.scss
@mixin mat-dialog-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .mat-dialog-container {
      @include _mat-theme-elevation(24, $theme);
      background: mat-color($primary, lighter);
      color: mat-color($foreground, text); //I WOULD LIKE TO CHANGE THIS
    }
    /* A LOT MORE GOING ON HERE */
}

For now, every time I would like to change part of this mixin, I have to copy the whole section and just edit the necessary item to overwrite it (for example .mat-dialog-container { background } from the above code):

//myCustomTheme.scss
@import '~@angular/material/theming';
@include mat-core();

//Define palettes
//mat-palette(color, default, lighter, darker)
$primary:          mat-palette($mat-blue-gray, 900);
$accent:           mat-palette($mat-orange, 500, 300, 700);
$warn:             mat-palette($mat-red, 500, 300, 700);

//Create the theme
$theme: mat-dark-theme($primary, $accent, $warn);

//START MODIFYING THE MIXING VARIABLES BY OVERWRITING THEM
@mixin mat-dialog-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .mat-dialog-container {
      @include _mat-theme-elevation(24, $theme);
      background: mat-color($primary, lighter);
      color: mat-color($primary, text); //I HAVE CHANGED THIS TO $primary
    }
    /* A LOT MORE GOING ON HERE */
}

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

This definitely doesn't feel like a proper approach. What are some proper ways to do it? I feel like this is very temporary and not a recommended approach.

0 Answers
Related