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

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.

To change foreground text color, first create your theme as per usual, then override theme.color.foreground.text:

// define theme as you do currently, e.g.
$theme: mat.define-light-theme(...)

/ grab color.foreground map from theme
$color: map-get($map: $theme, $key: color);
$foreground: map-get($map: $color, $key: foreground);

// override text of foreground map
$my-text-color: #3B4956;
$themed-foreground: map-merge($foreground, (text: $my-text-color));

// override foreground of $color map
$themed-color: map-merge($color, (foreground: $themed-foreground));

// override color of theme map
$theme: map-merge($theme, (color: $themed-color));

Proceed to generate css from $theme as per usual, ie @include mat.all-component-themes($theme) - make sure this is only done once. One way to achieve this:

_theme.scss 
// contains above theme - ok to include many places

theming.scss 
// generates css - only include once!
@import './theme';
...
@include mat.all-component-themes($theme)

I am surprised it isn't possible to do this in an easier way - expecting that will eventually change. Good luck.

The guide is available at the documentation website located here.

First, you define the palettes for your theme, such as $primary, $accent, $warn (in the guide they have $candy-app- prefix) and then create a $theme object:

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

Once we have a theme that contains all the palettes, we can get a foreground palette from it:

$foreground: map-get($theme, foreground);

From $foreground palette we can get any values based on a key, such as

secondary-text: rgba(black, 0.54),

or

text: rgba(black, 0.87)

Here's the code to retrieve the secondary-text property:

color: mat-color($foreground, secondary-text);

I switched to 2.0.0-beta.3 from 2.0.0-beta.2 and the folders structure looks different, you are right. It is now \node_modules\@angular\material\_theming.scss, _palette.scssfile is gone. You can do global search for it though: '$mat-dark-theme-background: ('

_theming.scss has all the colors, maps and all the functions, like mat-color