#Angular Material theme not working completely for button

1 messages · Page 1 of 1 (latest)

humble frigate
#

Here my configuration:

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

:root {
  --primary: rgb(48, 109, 159);
  --primary-contrast: rgb(255, 255, 255);
}

$primary-blue: (
  50: var(--primary),
  100: var(--primary),
  200: var(--primary),
  300: var(--primary),
  400: var(--primary),
  500: var(--primary),
  600: var(--primary),
  700: var(--primary),
  800: var(--primary),
  900: var(--primary),
  contrast: (
    50: var(--primary-contrast),
    100: var(--primary-contrast),
    200: var(--primary-contrast),
    300: var(--primary-contrast),
    400: var(--primary-contrast),
    500: var(--primary-contrast),
    600: var(--primary-contrast),
    700: var(--primary-contrast),
    800: var(--primary-contrast),
    900: var(--primary-contrast),
  )
);

$theme: mat.define-light-theme((
  color: (primary: mat.define-palette($primary-blue),
  ...
));

@include mat.all-component-themes($theme);

Yet the button is blue with black text instead of white text...

image.png
#

Cross that, all text are now black every where, isin't it set by the contrast?

#

Tried some other components and the text is black everywhere

loud goblet
#

it's just a wild guess, maybe it isn't working because you are using CSS variables. honestly I don't know if Material Themes supports CSS variables

humble frigate
#

I should say I'm using ng16 with ng-mat16 as well. This is a new project, and the code work in my v15 projects. I looked at the changes and I can't find what could be the problem.

#

But I'm already v15 in the other projects

#

I've found a temporary fix but I'd prefer not do this for every component that needs it:

@include mat.all-component-themes($theme);
@include mat.button-theme($dark-theme);
humble frigate
#

so if you'd like an other color then black or white, you will have to override the styles.