angularangular-materialangular17angular-material-theming

How to use custom color palette in @angular/material-experimental - Expected $config.color.primary to be a valid M3 palette


X [ERROR] Expected $config.color.primary to be a valid M3 palette.

angular 17

I can't find the expected valid M3 palette for @angular/material-experimental anywhere.

tryied this in styles.scss:

@use "@angular/material" as mat;
@use "@angular/material-experimental" as matx;

$primary-palette: (
    0: #000000,
    10: #191027,
    20: #2b1a41,
    25: #3d245c,
    30: #4f2f76,
    35: #9257c5,
    40: #654083,
    50: #79539b,
    60: #9d80b7,
    70: #c1aed3,
    80: #e5dbef,
    90: #e5ddee,
    95: #e9e3ef,
    98: #ebe7ef,
    99: #efecf1,
    100: #ffffff,
);

$m3-custom-theme: (
    color: (
        primary: $primary-palette
    ),
);

$light-theme: matx.define-theme($m3-custom);

html,
body {
    height: 100%;
    @include mat.button-theme($light-theme);
}

Solution

  • Short answer:

    Example of @angular/material@17.3.1 using a M3 custom colour theme instackblitz

    Long answer:

    First let's consider how the docs show how it's possible to use a prebuilt theme:

    @use '@angular/material' as mat;
    @use '@angular/material-experimental' as matx;
    
    $my-theme: matx.define-theme((
      color: (
        theme-type: dark,
        primary: matx.$m3-azure-palette,
      )
    ));
    
    @include mat.core(); // core component styles (unthemed)
    
    html {
      // Apply the base theme at the root, so it will be inherited by the whole app.
      @include mat.all-component-themes($my-theme);
    }
    

    Then, since there is no documentation on configuring a custom colour theme (as of version 17.3.1) I looked into the the code for the prebuilt themes in https://github.com/angular/components/blob/17.3.1/src/material-experimental/theming/_m3-palettes.scss.

    Unfortunately there are a few private methods in _m3-palettes.scss e.g. _apply-patches, so as a workaround I dumped out the $m3-azure-palette variable and used that as the starting point for our own custom colour theme. This compiles for me:

    @use '@angular/material' as mat;
    @use '@angular/material-experimental' as matx;
    
    // output from @debug matx.$m3-azure-palette
    $my-m3-colours: (
      0: #000000,
      10: #001b3f,
      20: #002f65,
      25: #003a7a,
      30: #00458f,
      35: #0050a5,
      40: #005cbb,
      50: #0074e9,
      60: #438fff,
      70: #7cabff,
      80: #abc7ff,
      90: #d7e3ff,
      95: #ecf0ff,
      98: #f9f9ff,
      99: #fdfbff,
      100: #ffffff,
      secondary: (
        0: #000000,
        10: #131c2b,
        20: #283041,
        25: #333c4d,
        30: #3e4759,
        35: #4a5365,
        40: #565e71,
        50: #6f778b,
        60: #8891a5,
        70: #a3abc0,
        80: #bec6dc,
        90: #dae2f9,
        95: #ecf0ff,
        98: #f9f9ff,
        99: #fdfbff,
        100: #ffffff,
      ),
      neutral: (
        0: #000000,
        10: #1a1b1f,
        20: #2f3033,
        25: #3b3b3f,
        30: #46464a,
        35: #525256,
        40: #5e5e62,
        50: #77777a,
        60: #919094,
        70: #ababaf,
        80: #c7c6ca,
        90: #e3e2e6,
        95: #f2f0f4,
        98: #faf9fd,
        99: #fdfbff,
        100: #ffffff,
        4: #0a0b0c,
        6: #101013,
        12: #1e1f23,
        17: #292a2d,
        22: #343438,
        24: #39393d,
        87: #dbdade,
        92: #e9e8ec,
        94: #efedf1,
        96: #f5f3f7,
      ),
      neutral-variant: (
        0: #000000,
        10: #181c22,
        20: #2d3038,
        25: #383b43,
        30: #44474e,
        35: #4f525a,
        40: #5b5e66,
        50: #74777f,
        60: #8e9099,
        70: #a9abb4,
        80: #c4c6d0,
        90: #e0e2ec,
        95: #eff0fa,
        98: #f9f9ff,
        99: #fdfbff,
        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,
      ),
    );
    
    $theme: matx.define-theme(
      (
        color: (
          theme-type: light,
          primary: $my-m3-colours,
          tertiary: matx.$m3-blue-palette,
        ),
      )
    );
    
    @include mat.core();
    @include matx.color-variants-back-compat($theme);
    
    :root {
      @include mat.all-component-themes($theme);
    }