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

问题

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.

回答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:

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

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

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

回答2:

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

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

回答3:

Here's 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

Example retrieving 'secondary-text':

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

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

来源：https://stackoverflow.com/questions/43438305/how-to-change-font-color-of-primary-palette-in-angular-material2

标签

css

fonts

angular-material2

textcolor