Currently, I am in the process of revamping a clubs app from Angular 9 to 18, as it has not been well maintained. My goal is to preserve as much of the frontend as possible and maintain the design more or less the same.
Within the code, I have identified the themes for our app as follows:
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($material-primary);
$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
$my-app-warn: mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
These settings are located in the colours.scss file, referenced in the styles.scss file of our old app. I intended to keep it all as is, but with Angular 17, the use of @import is no longer supported, replacing it with @use (as mentioned in this GitHub issue: https://github.com/angular/components/issues/28204)
I attempted to modify the code myself and also sought assistance from ChatGPT, resulting in the following updated snippet:
@use '@angular/material' as mat;
@include mat.core();
$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, 500, 900, 'A100');
$my-app-warn: mat.define-palette(mat.$red-palette);
$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);
However, I encountered an error message stating:
Unknown Function: 'define-palete' ...
Is there anyone who can guide me on the correct syntax to use? The tutorials from Angular still refer to the old system: