Angular 15 and Material 15 Primary Color

December 20, 2022

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?

>Solution :

You can find complete instructions for migration on this page. You can also check their cli migration 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 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);