4

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.

timthekoder
  • 415
  • 5
  • 16
  • Are you trying to customize the colors for dialog ? do you have common colors (theme) which you want to set there? – Nikhil Walvekar May 08 '20 at 14:42
  • In your application you can define styles to overwrite the Angular Material classes. If you do it in styles.scss it will be application wide. I would just use the class names instead of changing the mixins. – Gilles May 08 '20 at 19:42
  • @NikhilWalvekar: I have edited the questions to clarify it for you. Simply put, I just want to overwrite 1 value of an entire `@mixin` and for now, what I do is to copy the whole `@mixin` and edit that only 1 line. It doesn't feel right. – timthekoder May 08 '20 at 20:47
  • @Gilles: I am aware that I can overwrite it using regular CSS but it will be troublesome for future maintenance if I keep `!important` variables that cannot be overwritten. Some of them even requires changing `encapsulation` to `ViewEncapsulation.None`. Isn't it better to just edit the`@mixin` in the beginning to overwrite everything? – timthekoder May 08 '20 at 20:49
  • @user3622260 you don't have to use !important to override the styles. You just to use a selector with a higher specificity. – Gilles May 09 '20 at 16:49
  • @user3622260 As for overriding the mixins, I wasn't aware this was a common technique, I will follow this question to learn more about this. – Gilles May 09 '20 at 16:54
  • 2
    @user3622260 did you find any solution? if yes, could you please share it with us? – mor222 Oct 16 '20 at 08:37
  • @mor222: Unfortunately, I have not found any solution but to copy the whole mixin of the part I want to change and overwrite them. – timthekoder Nov 06 '20 at 16:54

0 Answers0