I recently upgraded my angular (+material-ui) system from version 13 to 16, and encountered an issue with the primary color of my custom theme. It seems that the value is no longer being recognized and defaults to blue. After updating the angular version, I included "@use "@angular/material" as mat;" along with values for typography and density to address build warnings.
Below is a snippet of my custom-theme.scss:
@use "@angular/material" as mat;
$my-orange: mat.define-palette(
mat.$pink-palette,
(
50: green,
100: green,
200: green,
300: green,
400: green,
500: green,
600: green,
700: green,
800: green,
900: green,
A100: green,
A200: green,
A400: green,
A700: green,
)
);
$my-accent: mat.define-palette(
mat.$blue-grey-palette,
(
50: white,
100: white,
200: white,
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: white,
A200: white,
A400: white,
A700: white,
)
);
$my-primary: mat.define-palette(mat.$pink-palette, 500);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
$my-theme: mat.define-light-theme(
(
color: (
primary: $my-primary,
accent: $my-accent,
),
typography: mat.define-typography-config(),
density: 0,
)
);
@function theme() {
@return $my_theme;
}
To import the custom theme in styles.scss:
@use "@angular/material" as mat;
@use "./custom-theme";
@include mat.core();
@include mat.all-component-themes(custom-theme.theme());
Upon running npm run start, the following error messages are displayed: 1.
Undefined function.
╷
│ @include mat.all-component-themes(custom-theme.theme());
│ ^^^^^^^^^^^^^^^^^^^^
╵
src/styles.scss 19:35 root stylesheet
(50: #80ba24, 100: #80ba24, 200: #80ba24, 300: #80ba24, 400: #80ba24, 500: #80ba24, 600: #80ba24, 700: #80ba24, 800: #80ba24, 900: #80ba24, A100: #80ba24, A200: #80ba24, A400: #80ba24, A700: #80ba24) isn't a valid CSS value.
╷
│ @error 'Hue "' + $hue + '" does not exist in palette. Available hues are: ' + map.keys($palette);
│ ^^^^^^^^^^^^^^
╵
node_modules/@angular/material/core/theming/_theming.scss 47:10 -get-color-from-palette()
node_modules/@angular/material/core/theming/_theming.scss 70:14 define-palette()
src/custom-theme.scss 3:13 root stylesheet