JRS
JRS

Reputation: 773

Custom Theme for Angular 19

I am trying to create a custom theme for my Angular 19 application. The following is working fine in my theme.scss file, using built-in themes:

@use '@angular/material' as mat;

$primary-palatte: mat.$green-palette;
$tertiary-pallate: mat.$red-palette;

html {
  @include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}

Now I want to replace $primary-palatte with my own custom palette, instead of the built-in one (mat.$green-palette). But when I try this:

@use '@angular/material' as mat;

$primary-palatte: ( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, );
$tertiary-pallate: mat.$red-palette;

html {
  @include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}

I get an error saying that $primary-palatte is not a valid M3 palette. I did some digging, and it was suggested to try:

$primary-palatte: mat.define-palette(( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, ));

But that gave me a compilation error saying that define-palette was undefined.

Why is "define-palette" undefined?

Where can I find a list of valid "mat." functions? (I'm using Visual Studio 2022, and it's not giving me any intellisense.)

How else can I create a valid M3 palette from what I have?

Any help would be most appreciated.

Thank you,

John

Upvotes: 2

Views: 1343

Answers (1)

Naren Murali
Naren Murali

Reputation: 57696

Create custom palettes:

To create a custom palette, we can use the command below referenced in the docs:

Custom Color Palettes

ng generate @angular/material:theme-color

The above command generates an easy prompt you can use to generate a palette.

enter image description here


Create a custom primary palette:

Once you run the above command, all you need to do is modify the primary palette with the colors you want and then import it to your theme.

We require only few important parts, where we define the primary colors in the palette map, the code that fetches the other sub palettes like secondary, neutral, neutral-variant and error. Then on the last step where we define primary-palette, we apply our custom colors to the base palette and then set it to the theme.

// This file was generated by running 'ng generate @angular/material:theme-color'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;
// define our custom colors here!
$_palettes: (
  primary: (
    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,
  ),
);
// construct the sub palettes with the base palette so that it can be overrridden
$_rest: (
  secondary: map.get(mat.$green-palette, secondary),
  neutral: map.get(mat.$green-palette, neutral),
  neutral-variant: map.get(mat.$green-palette, neutral-variant),
  error: map.get(mat.$green-palette, error),
);
// set the primary tone to your custom configuration
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);

Stackblitz Demo


The define-theme m2 method. No longer used:

The method define-palette seems to be an old method used by m2 to create an extended palette based on an existing palette. Here is the code reference and examples of its usage:

_theming.scss:36

define-palette

// M2 Only do not use for material 3
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);

If you are using m2 then we can define as mat.define-palette, but if you are using m3 it should be defined as mat.m3-define-palette.

Upvotes: 2

Related Questions