How to Change Font Color of Primary Palette in Angular Material2

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.

angular material text color using themes

Use the palette color's 'contrast' color:

color: mat-color($accent, default);

contrast-color: mat-color($accent, default-contrast);

For numeric hue keys, you can use mat-contrast instead of mat-color:

color: mat-color($accent, 500);

contrast-color: mat-contrast($accent, 500);

Knowing a little bit about the theming internals can be very useful.

setting text input color by angular material theme

Consider checking out the Customizing Component Styles guide before beginning.

Anyways, you've got to use the !important styles as your styles will be overridden by Angular Material's styles:

// ...
.mat-form-field-appearance-legacy .mat-form-field-label {
  color: white !important;
}

Change default gray palette dark mode color in Angular Material

Looks like we needed to override the background and foreground variables. I managed to achieve it using this example

Currently, there is no simple built-in way to change the background and foreground color.

angular material 2 custom theme button contrast

Button uses 500 as the background color - at least in your setup. In your config, you state that contrast color to 500 is #000000. Set it to #ffffff and you're good to go.

The contrast property tells Material what color to choose over the color background. So the line 100: #000000 means "when the background is 100, use #000000 as the text color". This ensures text readability.

Material uses 3 color shades for their elements. These colors are selected by calling mat-palette.

$my-primary: mat-palette($mat-my-green, 500, 50, 50);

That call tells Material to use 500 as the "main" shade, 50 as the darker and 50 as the lighter. Therefore the button has 500 color and then the contrast color get's selected for the text.

To make the text over 500 white:

contrast: (50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
));

https://stackblitz.com/edit/angular-material-custom-theme-button-contrast-8ma1fp?file=styles.scss

---

Related Topics