CODEWITHSUNDEEP
angularangular-materialmaterial-designmdc-componentsangular-theming
Andrew
Andrew

Reputation: 3796

Angular 15 theme overwritten by MDC components

Been following Angular material guidelines on theming, which led me to the following setup (ignore the $mx-* palettes, these are having correct values for 50..900 levels and likewise the contrasts):

@use '@angular/material' as mat;
@use 'sass:map';
@use 'core' as core;

$primary-palette: mat.define-palette(core.$mx-green-palette);

$light-theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $primary-palette,
    warn: mat.define-palette(mat.$deep-orange-palette),
  ),
  typography: core.$mx-typography,
  density: -1
));

/*Rewrite the background and foreground palettes*/
$light-theme: map.set(
    $light-theme,
    color,
    background,
    core.$mx-light-theme-background-palette
);

$light-theme: map.set(
    $light-theme,
    color,
    foreground,
    core.$mx-light-theme-foreground-palette
);

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

This yet is successfully ignored in some of the components, because of the mdc-theme on which my setup has no effect: enter image description here

after digging through the mixins that come into play when includingmat.all-component-themes I realized that the default MDC colors are given a priority:

enter image description here

enter image description here

Black is always used as the text color.

Should I additionally overwrite each of the colors in mdc-theme-color / how should these align with 50...900 palettes from my mat theme? Any guidance is much welcome!

Upvotes: 4

Views: 2474

Answers (1)

flemgs
flemgs

Reputation: 65

UPDATE: This issue is now adressed by Angular Material team in a larger one here: https://github.com/angular/components/issues/26153

Original answer:

I found out by inspecting the samples page for select component that using a prebuilt themes (purple-green in this case) you are able to override style that we can't override ourself using our own theme:

enter image description here

I opened an issue in their repo and asked for help if you want to help this issue to get visibility: https://github.com/angular/components/issues/26544

Upvotes: 4

Related Questions