Short answer:
Example of @angular/[email protected] 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);
}
