angular material changing default font color angular material changing default font color angular angular

angular material changing default font color


I believe this post answers your question: https://stackoverflow.com/a/46157803/10730815. Basically, you need to build a custom foreground map and merge it into your theme. Combining your code snippet and the ones in the post above gives something like this for your styles.scss:

@import '~@angular/material/theming';@include mat-core();$sg-app-primary: mat-palette($mat-indigo);$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);@function my-mat-light-theme-foreground($color) {    @return (        base:              $color,        divider:           $white-12-opacity,        dividers:          $white-12-opacity,        disabled:          rgba($color, 0.38),        disabled-button:   rgba($color, 0.38),        disabled-text:     rgba($color, 0.38),        hint-text:         rgba($color, 0.38),        secondary-text:    rgba($color, 0.54),        icon:              rgba($color, 0.54),        icons:             rgba($color, 0.54),        text:              rgba($color, 0.87),        slider-off:        rgba($color, 0.26),        slider-off-active: rgba($color, 0.38),        slider-min:        rgba($color, 0.38)    );};$white-foreground: my-mat-light-theme-foreground(white);$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));@include angular-material-theme($my-app-theme-custom);/* For the non-Angular Material items */body {    color: white;}


There are utility functions where you can pass in only a few of the necessary palettes such as primary, accent and warn and it will include background and foreground colors for you.

These functions can also be found in the scss provided by angular material file and if imported can be used when creating you theme configurations.

Here they are for reference so you can see how they automatically include the foregrounds and backgrounds for light and dark themes. Such awesome work by them.

 @function _mat-create-light-color-config($primary, $accent, $warn: null) {  @return (    primary: $primary,    accent: $accent,    warn: if($warn != null, $warn, mat-palette($mat-red)),    is-dark: false,    foreground: $mat-light-theme-foreground,    background: $mat-light-theme-background,  );}@function _mat-create-dark-color-config($primary, $accent, $warn: null) {  @return (    primary: $primary,    accent: $accent,    warn: if($warn != null, $warn, mat-palette($mat-red)),    is-dark: true,    foreground: $mat-dark-theme-foreground,    background: $mat-dark-theme-background,  );}