Custom material theme has no --mat and --mdc color variables set

i've updated my project from Angular material 2 to Angular material 3 with the last update (18.2.1) why all variables of components aren't set? the theme class is generated by "ng generate @angular/material:m3-theme" all components (like buttons) has no color.

And after that, there is a way to get the option "default-contrast" while getting the color from the palette?

thanks!

I've found that adding

:root {
    @include mat.core();
    @include mat.all-component-themes($light-theme);
    @include mat.system-level-colors($light-theme);
    @include mat.system-level-typography($light-theme);
    ...
}

resolve the problem but i dont know why and if it's the correct solution.

1. Colors not available

All color variants are no more available by default with angular material v3.

See documentation: https://material.angular.io/guide/theming#using-component-color-variants

Using component color variants

A number of components have a color input property that allows developers to apply different color variants of the component. When using an M3 theme, this input still adds a CSS class to the component (e.g. .mat-accent). However, there are no built-in styles targeting these classes. You can instead apply color variants by passing the $color-variant option to a component's -theme or -color mixins.

This API is more flexible, and produces less CSS. For example, the .tertiary-checkbox class shown above can be applied to any checkbox or any element that contains checkboxes, to change the color of all checkboxes within that element.

While you should prefer applying the mixins with color variants explicitly, if migrating from M2 to M3 you can alternatively use the provided backwards compatibility mixins that apply styles directly to the existing CSS classes (mat-primary, mat-accent, and mat-warn).

With v3 theme, you're supposed to create and use classes to apply style, instead of directly using color="accent" / color="primary" on material components.

In html:

 <mat-checkbox class="tertiary-checkbox" />
 <section class="tertiary-checkbox">
   <mat-checkbox />
 </section>

In scss/sass:

 @use '@angular/material' as mat;

 $theme: mat.define-theme();
 
 .tertiary-checkbox {
   @include mat.checkbox-color($theme, $color-variant: tertiary);
 }

You can check the documentation to see the default color variant, and other available $color-variant for each material component.

This may help you too: https://material.angular.io/guide/material-2-theming#how-to-migrate-an-app-from-material-2-to-material-3

2. Access color contrast

With material 3, there are now color roles that can be used. Colors can be retrieved from m3 theme with these role names. Contrast color roles are the ones beggining with "on-".

https://m3.material.io/styles/color/roles

https://m3.material.io/styles/color/system/how-the-system-works#3ce9da92-a118-4692-8b2c-c5c52a413fa6

https://material.angular.io/guide/theming-your-components#reading-color-roles

@use '@angular/material' as mat;
$primary: mat.get-theme-color($m3-theme, primary); //primary role
// associated contrast of primary role
$primary-contrast: mat.get-theme-color($m3-theme, on-primary);