I've set up a custom theme palette for my project that works perfectly with version ^12.2.13 of Angular Material, but not with ^13.2.3. Here's the SCSS code for my custom theming:
my-custom-theme.scss
@import '~@angular/material/theming';
@include mat-core();
$cust-blue: (primary: #002a5c, contrast: (primary: #ffffff));
$cust-gold: (accent: #989100, contrast: (accent: #ffffff));
$primary: mat-palette($cust-blue, primary);
$accent: mat-palette($cust-gold, accent);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);
angular.json
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/ngx-toastr/toastr.css",
"src/styles.css",
"src/assets/css/my-custom-theme.scss"
]
Error
./src/assets/css/my-custom-theme.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/assets/css/my-custom-theme.scss
- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: 'Hue "100" does not exist in palette. Available hues are: primary, contrast' ╷ 55 │ lighter: _get-color-from-palette($base-palette, $lighter), │
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵
node_modules@angular\material\core\theming_theming.scss 55:14
define-palette()
node_modules@angular\material\core\theming_theming-deprecated.scss 16:11 palette() src\assets\css/my-custom-theme.scss 6:11
root stylesheet
Any idea what might be causing this issue?