setting accent and warn color for button, Angular material 18

Question

I want to set warn and accent color of mat-button, I am unable to do so. Found some code on internet, but not working.

$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

Please help

m3-theme.scss

@use 'sass:map';
@use '@angular/material' as mat;    

// Note: Color palettes are generated from primary: #7DFA90, secondary: #7DFA90, tertiary: #7DFABA
$_palettes: (
  primary: (
    0: #000000,
    10: #002108,
    20: #003912,
  ),
  secondary: (
    0: #000000,
    10: #002108,
    20: #003912,
  ),
  tertiary: (
    0: #000000,
    10: #002112,
    20: #003822,
  ),
  neutral: (
    0: #000000,
    10: #1a1c19,
    20: #2f312d,
  ),
  neutral-variant: (
    0: #000000,
    10: #171d16,
    20: #2b322b,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$_custom: map.merge(map.get($_palettes, primary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    use-system-variables: true,
  ),
  typography: (
    use-system-variables: true,
  ),
));

Using it in styles .scss like this

@use './m3-theme';
.tertiary-checkbox {     
  @include mat.button-color(m3-theme.$light-theme, $color-variant: primary)
}

Answer 1

Currently you are trying to creating a M3 theme by using the mat.define-theme() mixin, using M2 palettes, which is not supported.

If you intended to create an application with M2 theming, you need to use the mat.m2-define-light-theme() mixin:

$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.m2-define-light-theme((
  color: (
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

If you want to use M3 in your app, you cannot use the M2 palettes. Instead, you can create a custom theme with the following schematics: ng generate @angular/material:m3-theme Note that in M3, the color attribute doesn't have an effect on buttons, see the button docs.

Answer 2

When working with custom themes, there seems to be a bug in angular material, where if we have use-system-variables the color is not set properly, without this set, the code works great, even when it's a custom theme.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

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

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

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

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

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

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

Stackblitz Demo

This is for M3 only approach.

I think this section of the documentation will help you.

Using component color variants

<mat-checkbox class="tertiary-checkbox" />
<section class="tertiary-checkbox">
  <mat-checkbox />
</section>

SCSS:

@use '@angular/material' as mat;

$theme: mat.define-theme();

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

We can apply this same logic to create our own warning colors and customize the buttons.

We can define variations using custom classes.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

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

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

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

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

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

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

HTML:

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button class="mat-custom-primary">Basic</button>
    <button mat-button class="mat-custom-secondary">Basic</button>
    <button mat-button class="mat-custom-tertiary">Basic</button>
    <button mat-button class="mat-custom-error">Basic</button>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button class="mat-custom-primary">Basic</button>
    <button mat-raised-button class="mat-custom-secondary">Basic</button>
    <button mat-raised-button class="mat-custom-tertiary">Basic</button>
    <button mat-raised-button class="mat-custom-error">Basic</button>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row">
    <button mat-stroked-button class="mat-custom-primary">Basic</button>
    <button mat-stroked-button class="mat-custom-secondary">Basic</button>
    <button mat-stroked-button class="mat-custom-tertiary">Basic</button>
    <button mat-stroked-button class="mat-custom-error">Basic</button>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-flat-button class="mat-custom-primary">Basic</button>
    <button mat-flat-button class="mat-custom-secondary">Basic</button>
    <button mat-flat-button class="mat-custom-tertiary">Basic</button>
    <button mat-flat-button class="mat-custom-error">Basic</button>
  </div>
</section>

Stackblitz Demo