Angular 15 and Material 15 Primary Color

Question

since update to Angular 15 and Material 15 my theme.scss with Primary Color still is not working any more. Since two hourse i tried many things but nowthing works. I have change stylesheets from css to scss.

in Material 14 my theme.scss looks like:

@import '~@angular/material/theming';
@include mat-core();

$md-elearningsupportportalwebapp-primary: (
    50 : #f2e2f0,
    100 : #dfb8d8,
    200 : #c988bf,
    300 : #b358a5,
    400 : #a33591,
    500 : #93117e,
    600 : #8b0f76,
    700 : #800c6b,
    800 : #760a61,
    900 : #64054e,
    A100 : #ff95e3,
    A200 : #ff62d5,
    A400 : #ff2fc8,
    A700 : #ff15c1,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);
$md-elearningsupportportalwebapp-accent: (
    50 : #e0eaf3,
    100 : #b3cbe2,
    200 : #80a8cf,
    300 : #4d85bb,
    400 : #266bad,
    500 : #00519e,
    600 : #004a96,
    700 : #00408c,
    800 : #003782,
    900 : #002770,
    A100 : #9fb8ff,
    A200 : #6c92ff,
    A400 : #396cff,
    A700 : #1f59ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);
$my-app-primary: mat-palette($md-elearningsupportportalwebapp-primary);
$my-app-accent:  mat-palette($md-elearningsupportportalwebapp-accent);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

and my angular json:

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "src/theme.scss",
              "./node_modules/material-icons-font/material-icons-font.css"
            ],

Error:

./src/theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import '~@angular/material/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\theme.scss 1:9  root stylesheet

I have tried to add it into styles.scss => not working.. i have read the documantetion, still also not wrokign => no idea?

Answer 1

You can find complete instructions for migration on this page. You can also check their cli migration tool to make it easy to transition from @angular/material v14 to v15+

$ ng generate @angular/material:mdc-migration

For further doc on theming you can use official theming doc

From what I see your issue is that you didn't modified your styles.css correctly

@use '@angular/material' as mat;
@include mat.core();

...

$my-app-primary: mat.define-palette($md-elearningsupportportalwebapp-primary);
$my-app-accent:  mat.define-palette($md-elearningsupportportalwebapp-accent);
$my-app-warn:    mat.define-palette($mat-deep-orange);
$my-app-theme:   mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

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