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 live “mat-elevation” and the color attribute on components doesn’t 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.