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:
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:
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!
