CODEWITHSUNDEEP
cssangularangular-materialmaterial-design-3
Gonzalo Unzueta
Gonzalo Unzueta

Reputation: 23

Warning message "Could not find Angular Material core theme" witn Angular 3, Angular Material and Angular Material Experimental

I've succesfully applied custom color palette with Material 3 and Angular Material Experimental, but I keep getting the warning in console "Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide".

This is pretty much what I've done, not my actual code, but it helps to prove the point, same message appears implementing this.

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

$m3-dark-theme: matx.define-theme((
  color: (
    theme-type: dark,
    primary: matx.$m3-green-palette,
    tertiary: matx.$m3-blue-palette,
  )
));

$m3-light-theme: matx.define-theme((
  color: (
    primary: matx.m3-$green-palette,
    tertiary: matx.$m3-blue-palette,
    )
));

@include mat.core();

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

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

I expect the warning message not to appear in the console

Upvotes: 1

Views: 558

Answers (1)

Naren Murali
Naren Murali

Reputation: 57436

The theme uses $m3-indigo-palette which is not a valid palette, please choose from the below list of palettes, for making it work!

components/guides/theming.md:97

- `$red-palette`
- `$green-palette`
- `$blue-palette`
- `$yellow-palette`
- `$cyan-palette`
- `$magenta-palette`
- `$orange-palette`
- `$chartreuse-palette`
- `$spring-green-palette`
- `$azure-palette`
- `$violet-palette`
- `$rose-palette`

If you want to use $indigo-palette A github issue on angular page for more clarity since there is less details on the angular docs.

Github Feature Request

I am unable to mix m2 styles with m3 theme, so I am unable to get the desired output!

Stackblitz Demo

Upvotes: 1

Related Questions