I am currently on the process of redoing out a clubs app from Angular 9 to 18, since it has not been well maintained. I am trying to keep as much of the frontend as possible and therefore also wanted to keep the design more or less the same.
I have found the following code defining the themes of our app within this code:
@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);
This can be found in the colours.scss file, which is referenced in the styles.scss file of our old app. I wanted to keep all of it intact, but since Angular 17 the use of @import is no longer possible, and I am supposed to use @use (like in this ticket: https://github.com/angular/components/issues/28204)
I have tried to change the code myself and with the help of ChatGPT came up with this:
@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);
Unfortunately it does not work and I get the following error:
Unknown Function: 'define-palete' ...
Does anyone have a clue, what the right syntax is? Even the tutorials provided by Angular still reference the old system: https://v7.material.angular.io/guide/theming
In Angular 18 with M3 theming, there is no define-palette() function anymore. To create a M2 palette, use mat.m2-define-palette(). If you want to create a custom M3 theme, use the custom theme generation schematics:
ng generate @angular/material:m3-theme