How dose Angular Material v15 theming work coming from v14

Question

Hi with the new update from angular material they changed how the theming works. I followed the tutorial on the Angular Material website and added a pallet defined my primary/accent color and apply that:

$lightBlue-palette: (
  50:  #f1f7f7,
  100: #d4f0f8,
  200: #a4e3f0,
  300: #6dc7da,
  400: #08badd,
  500: #2687a2,
  600: #216e88,
  700: #1d536a,
  800: #16384d,
  900: #0e2335,
  contrast: (
  50: rgba(black, 0.87),
  100: rgba(black, 0.87),
  200: rgba(black, 0.87),
  300: white,
  400: white,
  500: white,
  600: white,
  700: white,
  800: white,
  900: white,
  )
);

$my-primary: mat.define-palette($lightBlue-palette, 400);
$my-accent: mat.define-palette($lightBlue-palette, 900);

$my-theme: mat.define-light-theme((
color: (
  primary: $my-primary,
  accent: $my-accent,
  warn: mat.$red-palette
),
  typography: mat.define-typography-config(),
  density: 0,
));


@include mat.all-component-themes($my-theme);

like it is told in the docs. But then I get this error:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
  ╷
9 │   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
  │                                    ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@angular/material/button/_button-theme-private.scss 9:36    -ripple-color()
  node_modules/@angular/material/button/_button-theme-private.scss 43:5    ripple-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 177:7           @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5  @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3  using-mdc-theme()
  node_modules/@angular/material/button/_button-theme.scss 43:3            color()
  node_modules/@angular/material/button/_button-theme.scss 216:7           @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3          private-check-duplicate-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 210:3           theme()
  src/custom-theme.scss 55:1                                               root stylesheet

I know the update is brand new but I have no clue what they want from me and the error also docent really help me.

I tried to follow the docs from Angular Material

Answer 1

Check wherever you have loaded your material components (it can be placed at app.module.ts or a different file) that you don't have the legacy versions of these components. Usually marked as imports from angular material but with the legacy prefix. suc as import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy/card';