How to change the font color of the main palette in Angular Material2?

Question

The official documentation for Angular Material2 clearly states the following:

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

• Main palette: colors most widely used on all screens and components.
• Accent palette: colors used for floating buttons and interactive elements.
• Warning palette: colors used to convey error status.
• Foreground palette: colors for text and icons.
• Background palette: colors used for background elements.

But in each example, they only change 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 do I change the foreground palette to change the text color for the primary or secondary palette?

There are several sites ( materialpalette.com , material.io ) that show a color palette for easy visualization, but still they don’t say how to enable or modify this palette in Angular Material2.

Answer 1

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

• Create a 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); 

• Create your own foreground using a custom function that returns the foreground map, as defined by @angular/material/_theming.scss → $mat-light-theme-foreground .
  You can play with the map and determine only the fields you need and leave the rest by 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-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)); 

• Combine the previously created theme with only the foreground map and initialize your own theme.
  Note. . Since all maps in SCSS are immutable, map-merge() returns a new instance of the map and DOES NOT modify the map in place - so we have another variable $my-app-theme-custom to hold the subject of the result.

   $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 am using Angular Material v2.0.0-beta.8

Answer 2

The manual is available on the documentation website here .

First, you define palettes for your theme, such as $primary , $accent , $warn (they have the prefix $candy-app- ), 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 in front of it:

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

In the $foreground palette, we can get any values ​​based on the key, for example

 secondary-text: rgba(black, 0.54), 

or

 text: rgba(black, 0.87) 

Here is 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 folder structure looks different, you're right. Now the file \node_modules\@angular\material\_theming.scss , _palette.scss missing. You can do a global search: '$ mat-dark-theme-background: ('

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

Answer 3

Here is the code:

 // Foreground palette for light themes. $mat-light-theme-foreground: ( base: black, divider: rgba(black, 0.12), dividers: rgba(black, 0.12), disabled: rgba(black, 0.38), disabled-button: rgba(black, 0.38), disabled-text: rgba(black, 0.38), hint-text: rgba(black, 0.38), secondary-text: rgba(black, 0.54), icon: rgba(black, 0.54), icons: rgba(black, 0.54), text: rgba(black, 0.87) ); 

You can find the map at: \ node_modules \ @angular \ material \ core \ theming \ _palette.scss

An example of obtaining a "secondary text":

 $foreground: map-get($theme, foreground); .foreground-color { color: mat-color($foreground, secondary-text); }