Angular 13: Angular Material 13 custom theme throwing error

Question

I have custom theme pallet for my project which is working fine with version ^12.2.13 of the angular material but not with ^13.2.3. Below is my SCSS for custom theming:

custome-mat-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/custom-mat-theme.scss"
]

Error

./src/assets/css/custom-mat-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/custom-mat-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\custom-mat-theme.scss 6:11
root stylesheet

Can anyone tell me whats wrong with this?

There were some changes in last versions and @use should be used instead of @import you can check the tutorial for theming here. More to SCSS modules here. Not sure if this helps. I will try to reproduce the error. — joka00
– joka00, Commented Feb 28, 2022 at 15:57
I have tried using "@use" but that didn't help. Also tried looking into the official documentation but I've less knowledge about SCSS — avishekdr
– avishekdr, Commented Feb 28, 2022 at 16:14
It seems that from v13 all palette hue values must be defined. Check this discussion github.com/angular/components/issues/24250 — Maksat Rahmanov
– Maksat Rahmanov, Commented Mar 1, 2022 at 7:48
@MaksatRahmanov can you provide a sample on how to define all the hues in the palette as I don't require all the hues for my project? — avishekdr
– avishekdr, Commented Mar 1, 2022 at 10:14
@BarefacedBear it will look like this github.com/angular-university/angular-material-course/blob/… — Maksat Rahmanov
– Maksat Rahmanov, Commented Mar 1, 2022 at 10:27

Dharman · Accepted Answer · 2022-03-14 08:59:58Z

8

It seems that material needs at least hue: 100, hue 500 and hue 700 (probably for functions like lighter etc).

I had the same problem as you, I only defined that hue 500. I then set hue 100 and hue 700 for each color and it solved my problem. Personally, for beginning, I used the same color for the three hue.

edited Mar 14, 2022 at 8:59

Dharman♦

33.9k27 gold badges103 silver badges153 bronze badges

answered Mar 14, 2022 at 8:54

RobinE

892 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DevSay Over a year ago

What exactly did you change or add for hue: 100?

JRichardsz Over a year ago

Where did you do that?

Collectives™ on Stack Overflow

Angular 13: Angular Material 13 custom theme throwing error

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related