Setting Mat-Button color in Angular Material 19 (M3)

Question

I'm using angular material 19.0.3 and the m3 theming mechanism here's my style.scss

html {
  color-scheme: light dark;
  @include mat.theme((color: (
        primary: ft-green-theme.$primary-palette,
        tertiary: ft-green-theme.$tertiary-palette,
      ),
      typography: InterVariable,
      density: 0));

  &[dir='rtl'] {
    @include mat.theme((typography: IranSans,
      ));
  }
}

body.light {
  color-scheme: light;
}

body.dark {
  color-scheme: dark;
}

Now I have a button

I used to be able to do this

and the button would be red.

But in the new version of angular material (19) they've changed things. I tried to read the documentation but I don't understand a thing.

In mat-button documentation it says:

Theme color of the button. This API is supported in M2 themes only, it has no effect in M3 themes.

For information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-color-variants.

And in the link provided there's just an explanation about how to give a color pallette as a theme.

But suppose, I'm gonna have a confirmation dialog and the yes button will be green and the cancel button will be red.

How am I supposed to color individual mat-buttons in angular material 19??

Naren Murali · Accepted Answer

When you use @include mat.theme(...) everything is taken care of internally, so there is no way to access the theme (to my knowledge) so you need to set the overrides manually using @include mat.button-overrides(( ... )).

This method could be a problem, since you just want to theme the button based on whether it's primary, secondary, etc.

As far as I know, the available options of types are 'primary', 'secondary', 'tertiary', 'error'.

We can define our own theme button by using mat.button-color, this mixin takes two arguments.

/// Outputs color theme styles for the mat-button.
/// @param {Map} $theme The theme to generate color styles for.
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
///   $color-variant: The color variant to use for the button: primary, secondary, tertiary,
///      or error (If not specified, default primary color will be used).
@mixin color($theme, $options...) {

The first is the theme, but when we use @include mat.theme(...) we do not have this theme stored in a SCSS property, hence we can use the previous method of using mat.define-theme, Which provides the theme for use to customize.

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$magenta-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

After this, it is simply a matter of inputting this theme to the function and setting the color variant.

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
  @include mat.all-component-themes($theme);

  .primary {
    @include mat.button-color($theme: $theme, $color-variant: 'primary');
  }

  .secondary {
    @include mat.button-theme($theme: $theme, $color-variant: 'secondary');
  }

  .tertiary {
    @include mat.button-theme($theme: $theme, $color-variant: 'tertiary');
  }

  .error {
    @include mat.button-theme($theme: $theme, $color-variant: 'error');
  }
}

Full Code:

SCSS:

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$magenta-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
  @include mat.all-component-themes($theme);

  .primary {
    @include mat.button-color($theme: $theme, $color-variant: 'primary');
  }

  .secondary {
    @include mat.button-theme($theme: $theme, $color-variant: 'secondary');
  }

  .tertiary {
    @include mat.button-theme($theme: $theme, $color-variant: 'tertiary');
  }

  .error {
    @include mat.button-theme($theme: $theme, $color-variant: 'error');
  }
}

html {
  height: 100%;
}

@include mat.typography-hierarchy($theme);

TS:

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

/**
 * @title Basic buttons
 */
@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrl: 'button-overview-example.css',
  imports: [MatButtonModule, MatDividerModule, MatIconModule, CommonModule],
})
export class ButtonOverviewExample {
  types = ['primary', 'secondary', 'tertiary', 'error'];
}

HTML:

@for(type of types; track $index) {

  Basic {{type}}
  
    
    
    Link
  

}

@for(type of types; track $index) {

  Raised {{type}}
  
    
    
    Link
  

}

@for(type of types; track $index) {

  Stroked {{type}}
  
    
    
    Link
  

}

@for(type of types; track $index) {

  Flat {{type}}
  
    
    
    Link
  

}

@for(type of types; track $index) {

  Icon {{type}}
  
    
      
      
    
  

}

@for(type of types; track $index) {

  FAB {{type}}
  
    
      
        
      
      
        
      
    
  

}

@for(type of types; track $index) {

  Mini FAB {{type}}
  
    
      
        
      
      
        
      
    
  

}

@for(type of types; track $index) {

  Extended Fab {{type}}
  
    
      
        
      
      
        
      
      
        
          favorite
          Link
        
      
    
  

}

Setting Mat-Button color in Angular Material 19 (M3)

Answers (2)

Full Code:

SCSS:

TS:

HTML:

Stackblitz Demo

Related Questions