Angular 2 Material Foreground

user_4770761 0
Viewed 5820

I have difficulties changing colour of foreground in angular 2 material. For example in toolbar, text is black. I tried to change it with following styles

@import '~@angular/material/theming';

$primary: mat-palette($mat-cyan, 300);
$accent : mat-palette($mat-yellow, 500);;
$warn : mat-palette($mat-red, 600);

$theme-foreground: (
  base:              gray,
  divider:           $white-12-opacity,
  dividers:          $white-12-opacity,
  disabled:          rgba(200, 200, 200, 0.38),
  disabled-button:   rgba(200, 200, 200, 0.38),
  disabled-text:     rgba(200, 200, 200, 0.38),
  hint-text:         rgba(200, 200, 200, 0.38),
  secondary-text:    rgba(200, 200, 200, 0.54),
  icon:              rgba(200, 200, 200, 0.54),
  icons:             rgba(200, 200 , 200, 0.54),
  text:              rgba(200, 200, 200, 0.87),
  slider-min:        rgba(200, 200, 200, 0.87),
  slider-off:        rgba(200, 200, 200, 0.26),
  slider-off-active: rgba(200, 200, 200, 0.38),
);

$theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(200, 200, 200, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
);

$theme: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $theme-foreground,
    background: $theme-background
  );

@include mat-core();

@include angular-material-theme($theme);

Primary and accent colours are changed, but the frontend did not change. How can I fix it?

I also tried to set toolbar theme, but there wasn't any difference.

angular-material2 material-design angular
2 Answers

The way you're setting the custom foreground and background is correct - however, for toolbar the font color is decided as follows:

  • if the toolbar is set to primary/accent/warn colors, use the default-contrast color
  • otherwise use the foreground text color

In other words, if your toolbar color is using the primary palette, you're going to have to play around with the contrast colors for $primary - don't recommend this as any number of material components use these. Best to go the old fashioned way and change your toolbar color manually.

If you're really determined to, you can make a custom primary/accent palette with the contrast colors you want and use that to create your theme, like this: https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss

I suggest sticking to greyscale colors for contrast - in some cases Material takes a color and inverts it, so you may end up with something wacky.

user_106749170
Related