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 multi

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.