Struggling to change the foreground color after switching from material 15 legacy theming to non legacy.
$theme: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn,
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
);
@include mat.all-legacy-component-themes($theme);
Now if I update to use the non legacy version the foreground color does not work.
$my-theme: mat.define-light-theme(
(
color: (
primary: $my-primary,
accent: $my-accent,
foreground: $mat-light-theme-foreground, // does not work
),
typography: mat.define-typography-config(),
density: 0,
foreground: $mat-light-theme-foreground, // does not work
background: $mat-light-theme-background,// does not work
)
);
@include mat.all-component-themes($my-theme);
When it comes to background, all you need to do is add “ to the body tag and it will be colored based on the material theme.
Theming.md
Application background color
By default, Angular Material does not apply any styles to your DOM
outside its own components. If you want to set your application’s
background color to match the components’ theme, you can either:
- Put your application’s main content inside
mat-sidenav-container, assuming you’re usingMatSidenav, or- Apply the
mat-app-backgroundCSS class to your main content root element (typicallybody).
When it comes to foreground you can set the contrast of the palette.
Reference answer by JSON Derulo
$my-primary: (
50: #eeeeee, // here you need to set the hues of your desired color
...
contrast: (
50: #000000, // <- here you need to choose white or black
...
),
);