angular material changing default font color

Question

i am using angular material and a bit lost at theming. I am using the prebuilt indigo-pink theme which is included in my styles.scss as below

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

Based on the doc i created a new file called theme.scss and included it in the angular.json after styles.scss. The theme.scss looks like below

@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);

@include angular-material-theme($sg-app-theme);

My Requirement I just need to change default font color to white rather black everywhere. I dont need to change anything else at all. I have copied the primary and accent pallete just from example. so feeling even they are not required to be changed.

Answer 1

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;
}

Answer 2

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,
  );
}

Answer 3

Here's what worked for me with Angular 15 and no custom functions.

@use '@angular/material' as mat;

...

$newFontColor: green;

// Get color param from our theme
$palette-color : map-get($mat-indigo, color);
// Get background param from color param
$foreground: map-get($palette-color, foreground);
$foreground: map_merge($foreground, (text: $newFontColor);
// Set foreground param for palette
$palette-color: map_merge($palette-color, (foreground: $foreground));
// Set palette for theme
$light-theme: map_merge($light-theme, (color: $palette-color));

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

This article helped me piece things together.