Reputation: 773
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
Reputation: 57696
To create a custom palette, we can use the command below referenced in the docs:
ng generate @angular/material:theme-color
The above command generates an easy prompt you can use to generate a 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);
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:
// 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