angularangular-materialmaterial-designmaterial3angular-material-18

How can i add a custom palette to angular M3 theme?


I can create a e.g. a custom primary palette with custom colors. Can i add an other palette like "primary" with "custom" name and other custom colors and names.

I want to add a color "navigation-background" to the theme. It works with M2, but in M3??

$light-theme: mat.define-theme(
    (
        color: (
            theme-type: light,
            primary: $_primary,
            tertiary: $_tertiary,
        ),
        typography: (
            brand-family: 'Roboto',
            bold-weight: 900,
        ),
    )
);

Solution

  • Try setting a custom secondary theme and a root class that applies this extra colors. You can also create a custom theme for full control over the secondary theme palettes

    $extra-theme: mat.define-theme((
      color: (
        theme-type: light,
        primary: mat.$green-palette,
        tertiary: mat.$green-palette,
      )
    ));
    
    
    .mat-custom-color {
      @include mat.button-color($extra-theme, $color-variant: primary);
    }
    

    HTML:

    <section>
      <div class="example-label">Raised</div>
      <div class="example-button-row">
        <button mat-raised-button class="mat-custom-color">Basic</button>
        <button mat-raised-button class="mat-custom-color">Basic</button>
        <button mat-raised-button class="mat-custom-color">Basic</button>
        <button mat-raised-button class="mat-custom-color">Basic</button>
      </div>
    </section>
    

    Reference answer with working example


    The best solution is to keep the color in the palette, since it avoids hardcoding.

    ng generate @angular/material:m3-theme
    

    Then in the multiple palettes find a way to insert your custom color.

    // This file was generated by running 'ng generate @angular/material:m3-theme'.
    // Proceed with caution if making changes to this file.
    
    @use 'sass:map';
    @use '@angular/material' as mat;
    
    // Note: Color palettes are generated from primary: #eeeeee, secondary: #fefefe, tertiary: #000000, neutral: #ffffff
    $_palettes: (
      primary: (
        0: #000000,
        10: #001f24,
        20: #00363d,
        25: #00424a,
        30: #004f58,
        35: #005b66,
        40: #006874,
        50: #008391,
        60: #00a0b0,
        70: #22bccf,
        80: #4fd8eb,
        90: #97f0ff,
        95: #d0f8ff,
        98: #edfcff,
        99: #f6feff,
        100: #ffffff,
      ),
      secondary: (
        0: #000000,
        10: #001f24,
        20: #00363d,
        25: #00424a,
        30: #004f58,
        35: #005b66,
        40: #006874,
        50: #008391,
        60: #00a0b0,
        70: #22bccf,
        80: #4fd8eb,
        90: #97f0ff,
        95: #d0f8ff,
        98: #edfcff,
        99: #f6feff,
        100: #ffffff,
      ),
      tertiary: (
        0: #000000,
        10: #3e001d,
        20: #5e1133,
        25: #6c1d3e,
        30: #7b2949,
        35: #893455,
        40: #984061,
        50: #b6587a,
        60: #d57193,
        70: #f48bae,
        80: #ffb1c8,
        90: #ffd9e2,
        95: #ffecf0,
        98: #fff8f8,
        99: #fffbff,
        100: #ffffff,
      ),
      neutral: (
        0: #000000,
        4: #000c0e,
        6: #001316,
        10: #001f24,
        12: #002429,
        17: #002f35,
        20: #00363d,
        22: #003b42,
        24: #004047,
        25: #00424a,
        30: #004f58,
        35: #005b66,
        40: #006874,
        50: #008391,
        60: #00a0b0,
        70: #22bccf,
        80: #4fd8eb,
        87: #81e9f9,
        90: #97f0ff,
        92: #aef3ff,
        94: #c5f6ff,
        95: #d0f8ff,
        96: #daf9ff,
        98: #edfcff,
        99: #f6feff,
        100: #ffffff,
      ),
      neutral-variant: (
        0: #000000,
        10: #141d1f,
        20: #293234,
        25: #343d3f,
        30: #3f484a,
        35: #4b5456,
        40: #576062,
        50: #6f797a,
        60: #899294,
        70: #a3adaf,
        80: #bfc8ca,
        90: #dbe4e6,
        95: #e9f2f4,
        98: #f2fbfd,
        99: #f6feff,
        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,
      ),
    );
    
    $_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);
    
    $light-theme: mat.define-theme((
      color: (
        theme-type: light,
        primary: $_primary,
        tertiary: $_tertiary,
      ),
    ));