feat(material/schematics): Add custom M3 theme schematic

[amysorto]

No description provided.

[andrewseguin]

Woo exciting!

This PR should also edit the docs to include information about using this schematic

[amysorto]

I just changed the theme names from $m3-light-theme to $light-theme and $m3-dark-theme to $dark-theme.

Since in docs example the file is imported with @use instead of @import, you will need the namespace when using the variable. Removing the m3- prefix from the theme just makes it less repetitive. If left unaliased, the import would look like @use './path/to/m3-theme', and using the themes would look like m3-theme.$light-theme.

[andrewseguin]

We should also add the new schematic to guides/schematics.md

[userhv]

[ERROR] "Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector"

theme.scss

@use '@angular/material' as mat;
@use '../m3-theme.scss' as my-theme;



@include mat.core();

// Apply the light theme by default
@include mat.core-theme(my-theme.$light-theme);
@include mat.button-theme(my-theme.$light-theme);

[amysorto]

Hi @userhv, thanks for trying out M3! That error is specific to how you set up your theme.scss file not the schematic itself. So the calls to core-theme and button-theme need to be wrapped in a selector (wasn't required in M2, but is now in M3), for example your file might look like this:

@use '@angular/material' as mat;
@use '../m3-theme.scss' as my-theme;

@include mat.core();

html {
  // Apply the light theme by default
  @include mat.core-theme(my-theme.$light-theme);
  @include mat.button-theme(my-theme.$light-theme);
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}