angular material 18 - problem with colours

Question

I generated (ng generate @angular/material:my--own-theme) have such code in own-theme.scss

somehow it works for the palette which is included into angular material. But I would like to use my own theme. So below you can see what code was generated and I what I did:

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

// Note: Color palettes are generated from primary: #2397e6, secondary: #00639a, tertiary: #006c51, neutral: #9dcaff
$_palettes: (
  primary: (
    0: #000000,
    10: #001d33,
    20: #003354,
    25: #003e65,
    30: #004a77,
    35: #005689,
    40: #00639c,
    50: #007cc3,
    60: #2397e6,
    70: #53b2ff,
    80: #97cbff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001d32,
    20: #003353,
    25: #003f64,
    30: #004a75,
    35: #005787,
    40: #00639a,
    50: #207cbb,
    60: #4597d6,
    70: #63b1f3,
    80: #96ccff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #002116,
    20: #003829,
    25: #004432,
    30: #00513c,
    35: #005e46,
    40: #006c51,
    50: #008766,
    60: #21a37e,
    70: #47bf97,
    80: #66dbb2,
    90: #83f8cd,
    95: #bbffe2,
    98: #e7fff2,
    99: #f4fff7,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #000c15,
    6: #001120,
    10: #001d35,
    12: #00213c,
    17: #002c4d,
    20: #003257,
    22: #00365e,
    24: #003b65,
    25: #003d69,
    30: #00497c,
    35: #00558f,
    40: #0061a2,
    50: #307bbe,
    60: #4f95d9,
    70: #6cb0f6,
    80: #9dcaff,
    87: #c1dcff,
    90: #d1e4ff,
    92: #dbe9ff,
    94: #e4eeff,
    95: #e9f1ff,
    96: #eef4ff,
    98: #f8f9ff,
    99: #fdfcff,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #171c22,
    20: #2c3137,
    25: #373c42,
    30: #42474e,
    35: #4e535a,
    40: #5a5f66,
    50: #72777f,
    60: #8c9199,
    70: #a7abb3,
    80: #c2c7cf,
    90: #dee3eb,
    95: #ecf1f9,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
  accent: (
    0: #000000,
    10: #001d33,
    20: #003354,
    25: #003e65,
    30: #004a77,
    35: #005689,
    40: #00639c,
    50: #007cc3,
    60: #2397e6,
    70: #53b2ff,
    80: #97cbff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
),
);

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

$_rest2: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);

$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest2);

$_primary: mat.$orange-palette;

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary
  ),
));

and in HTML

  <div class="demo-buttons custom-theme">
    <h2>Custom Theme</h2>
    <button mat-raised-button color="primary">Raised</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="tertiary">tertiary</button>
    <button mat-raised-button color="warn">Warn</button>
  </div>

The point is, that:

1. primary and tertiary has the same colour (I suppose not from my own theme) - why and how to change it?
2. how to change eg. background of that buttons?
3. how to change 'accent' colour?

Thanks in advance for any response.

Answer 1

As mentioned in this github issue:

The color input is no longer used for M3. Instead, you can create your own theme for different variants. For more on this, see material.angular.io/guide/theming#using-component-color-variants

pointing to the material 18 documentation:

While you should prefer applying the mixins with color variants explicitly, if migrating from M2 to M3 you can alternatively use the provided backwards compatibility mixins that apply styles directly to the existing CSS classes (mat-primary, mat-accent, and mat-warn).

So my answer to your questions would be:

The color input is mainly coming from M2 which does not use a tertiary color, so with enabling the feature with @include mat.color-variants-backwards-compatibility(my-custom-theme.$light-theme); "tertiary" as a variant becomes not available.

You could add it in your global style.scss

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

and apply it in your template like this

<button mat-raised-button class="tertiary-color">Tertiary</button>

but you will find that the color becomes the same as accent which is, because apparently M3 uses the tertiary color as accent color in legacy mode. So you may want to define the secondary color instead.

To customize the background-color, you can overwrite the default background with your own, e.g.

.tertiary-button{
  @include mat.button-color(my-custom-theme.$light-theme, $color-variant: tertiary);
  background-color: red !important;
}