Angular Material 3 theme not including all styles like elevation or color

I have been playing with the new Angular Material 3 design styles from the latest Angular 18.0.0 version as of today. Have tried to follow the documentation here. Below is what I have done so far.

@use '@angular/material' as mat;
@include mat.core();
@include mat.all-component-typographies();

$m3-light-theme: mat.define-theme();

:root {
@include mat.all-component-themes($m3-light-theme);
}


Most of styles seem to apply. However, this seems to be missing styles like "mat-elevation" and the color attribute on components does not seem to have effect.

If I however create an Material 2 theme like below and add it to my stylesheet then elevation and colors worked.

$app-theme: mat.m2-define-light-theme((
color: (
primary: $app-primary,
accent: $app-accent,
warn: $app-warn,
)
));

:root {
@include mat.all-component-themes($app-theme-custom-foreground);
@include mat.all-component-themes($m3-light-theme);
}


The question is should we include both Material 2 and 3 themes? From the documentation it seems you should only apply the theme you want but the Material 3 way doesn't seem to include everything.

Continue reading...