How to apply a theme generated from Material 3 Theme builder website to the project in Angular 17.2.0?

Question

I am using Angular 17.2.0, I wish to apply custom theming to my Material 3 UI (Experimental). I generated a theme from https://m3.material.io/theme-builder. I exported the theme which gives me a bunch of CSS files, I included the theme.css file which @imports all the other files. I could not find any documentation in relation to how to use user-defined theme, all the documentation is regarding how to use pre-defined palettes or to set primary, accent color for material 2.

Following is the code of my current styles.scss file:

@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;

$dark-theme: matx.define-theme((
  color: (
    theme-type: dark,
    primary: matx.$m3-green-palette
  ),
  density: (
    scale: -1
  )
)); 

*{
  @include mat.all-component-themes($dark-theme);
}

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

I tried including the theme.css file which @imports all the other files, searched for documentation on m3.material.io and https://material.angular.io/ but couldn't come up with an answer to my problem.

Edit: I have also tried it with and without @include mat.core()

Answer 1

You can have a look at the demo app styles : https://github.com/angular/components/blob/main/src/dev-app/theme-m3.scss

You're at least missing @include mat.core();