Angular 15 and Material 15 Primary Color - angular-material

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 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);