CODEWITHSUNDEEP
angularangular-materialthemesangular16angular-material-theming
rmpt
rmpt

Reputation: 654

Angular Material 16 Theme constrast

I've migrated my project from Angular 14 to angular 16, following the migration guide. Everything is fine, except the material theme. Everything seems to be loaded correctly, but the contrast colors are not being applied correctly.

For example, before migration, color 800: #ff8700 has his contrast as white, working great. Now, the same pallet (same 800: #ff8700 with contrast white), but it is rendered with a contrast color black. There's the images:

Before migration: enter image description here

After migration: enter image description here

My pallet is the following:

@use '@angular/material' as mat;
@include mat.core();

$my-palette: (
  50: #fff7e0,
  100: #ffeab1,
  200: #ffdc7e,
  300: #ffd04a,
  400: #ffc41f,
  500: #ffba00,
  600: #ffac00,
  700: #ff9900,
  800: #ff8700,
  900: #ee6001,
  contrast: (
    50: mat.get-color-from-palette(mat.$indigo-palette, '50-contrast'),
    100: mat.get-color-from-palette(mat.$indigo-palette, '100-contrast'),
    200: mat.get-color-from-palette(mat.$indigo-palette, '200-contrast'),
    300: mat.get-color-from-palette(mat.$indigo-palette, '300-contrast'),
    400: mat.get-color-from-palette(mat.$indigo-palette, '400-contrast'),
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff
  )
);


$my-primary: mat.define-palette($my-palette, 800, 500, 800, 800);
$my-accent:  mat.define-palette($my-palette, 800, 500, 800, 800);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent
  ),
  density: 0
));
@include mat.all-component-themes($my-theme);

I've tried many variation, checked github issue here but can't seems to find a way to make my contrast being applied correctly. Seems that angular decides to apply black instead of my defined color.

Upvotes: 0

Views: 898

Answers (1)

s.katyan
s.katyan

Reputation: 81

I think it is happening on legacy material components. If yes you can add the following lines in your code after "@include mat .core();"

@include mat.legacy-core();
@include mat.all-legacy-component-typographies();

Also, add @include mat.all-legacy-component-themes($your-custom-palette); for legacy component themes

Upvotes: 0

Related Questions