CODEWITHSUNDEEP
angularangular-material-18
Shadoweb
Shadoweb

Reputation: 6306

Angular Material 18 color property ignored

I've created a new Angular app to test the M3 theme, no other styles are setup.
But this is how it looks from literally copy/pasting the code from Angular's example

enter image description here

My full CSS:

@use "@angular/material" as mat;
@use "m3-theme";
@include mat.core();
$test-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

:root {
  @include mat.all-component-themes($test-theme);
}

Did I miss a step?

Upvotes: 2

Views: 633

Answers (1)

Александр Клетный
Александр Клетный

Reputation: 1

Try this:

@use "@angular/material" as mat;
@use "m3-theme";

@include mat.core();

$test-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

//
@include mat.color-variants-backwards-compatibility($test-theme);
//

:root {
  @include mat.all-component-themes($test-theme);
}

Upvotes: 0

Related Questions