How to keep colors and buttons design in Angular switching from M2 to M3 theme

Angular crashed my whole layout with the new theming in version 19.

Before with the M2 theming my buttons looked like:



This is the M2 code for the normal colors:

$my-app-primary: mat.m2-define-palette(mat.$m2-blue-palette, 500);
$my-app-accent: mat.m2-define-palette(mat.$m2-deep-orange-palette, 500, 900, A100);
$my-app-warn: mat.m2-define-palette(mat.$m2-red-palette);

$my-app-theme: mat.m2-define-light-theme((
color: (primary: $my-app-primary,
accent: $my-app-accent,
warn: $my-app-warn,
),
typography: mat.m2-define-typography-config(),
density: 0,
));


Now with M3 and the mat.$blue-palette as base it looks complete different (no blue buttons anymore e.g.):



I tried to create a _theme_colors.scss file with

ng generate @angular/material:theme-color


and entered the old primary color blue, the orange and the red as primary, secondary (why not accent?) etc. But that may change the color of the text but not the buttons as whole.

This is my new M3 code:

@use '@angular/material' as mat;
@use './theme-colors.scss' as my-colors; //My generated color palette file
@include mat.core();

.global-light-theme {
@include mat.theme(
(
color: (
//primary: my-colors.$primary-palette,
primary: mat.$blue-palette,
)
));
}


This is the code I have as an example to create 3 test buttons:

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warning</button>


I really want to use the new M3 theming stuff - but I don't want to change it my whole look and feel of my app/website.

And we're only talking about the colors that are broken and not the corners that are far too round. That's another issue.

Continue reading...