css - How to change font color of primary palette in Angular Material2?

Question

In the official theming documentation of Angular Material2 it states clearly the following:

In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:

• A primary palette: colors most widely used across all screens and components.
• An accent palette: colors used for the floating action button and interactive elements.
• A warn palette: colors used to convey error state.
• A foreground palette: colors for text and icons.
• A background palette: colors used for element backgrounds.

But in every example they modify only the first three:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

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

So my question is: How can I change the foreground palette in order to change the color of the text for the primary or the secondary palette?

There are some websites (materialpalette.com, material.io) which show the color palette for easy visualization but still they don't say how to include or modify that palette in Angular Material2.

Answer 1

You can change the default theme color by creating your own foreground map and merge it into the created theme before initializing it. Here is how:

1. Build the theme object as usual.

    @import '@angular/material/theming.scss';
    @include mat-core();
   
    // Choose colors
    $my-app-primary: mat-palette($mat-blue-grey);
    $my-app-accent:  mat-palette($mat-light-green);
    $my-app-warn:    mat-palette($mat-red);
   
    // Build theme object (its practically a map object)
    $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
   

2. Build your custom foreground using a custom function returning foreground map as defined in @angular/material/_theming.scss -> $mat-light-theme-foreground function.
   You can play with the map and define only the fields you want and leave the others as default.

    @function my-mat-light-theme-foreground($color) {
        @return (
            base:              $color,
            divider:           $black-12-opacity,
            dividers:          $black-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-min:        rgba($color, 0.87),
            slider-off:        rgba($color, 0.26),
            slider-off-active: rgba($color, 0.38),
        );
    };
   
    // You can put any color here. I've chosen mat-color($my-app-primary, 700)
    $my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));
   

3. Merge the previously created theme with just the foreground map and initialize your custom theme.
   Note: Since all maps in SCSS are immutable the map-merge() returns new map instance and DOES NOT modify the map in place - thus we have another variable $my-app-theme-custom to hold the result theme.

    $my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));
   
    // Include your custom theme.
    @include angular-material-theme($my-app-theme-custom);
   

Note: I'm using Angular Material v2.0.0-beta.8

EDIT Oct 2020: - I've added the property slider-min to the map since couple of folks in the comments reported it was added in the foreground map in later builds.