3

Using Angular 2 (4) + Material, I need to customize a component's theme. I first try with the built in palettes but keep getting "error: undefined". It works only if map-get is passed "primary", "accent" or "warn" as second parameter:

styles.scss

@import '~@angular/material/theming';
@include mat-core();

@import 'app/app.component.scss-theme';

$default-theme-primary: mat-palette($mat-light-green);
$default-theme-accent:  mat-palette($mat-indigo);
$default-theme-warn:    mat-palette($mat-red);
$default-theme: mat-light-theme($default-theme-primary, $default-theme-accent, $default-theme-warn);

@include angular-material-theme($default-theme);
@include app-component-theme($default-theme);

app.component.scss-theme.scss

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

@mixin app-component-theme($theme){

  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  $text: map-get($theme, text);
  $card: map-get($theme, card);
  $lighter: map-get($theme, lighter);
  $darker: map-get($theme, darker);

  .test{
    font-size: 5em;
    color: mat-color($primary)!important; // works
    // color: mat-color($darker)!important; // fails
    // color: mat-color($lighter)!important; // fails
    // color: mat-color($text)!important; // fails
    // color: mat-color($card)!important; // fails
  }
}

I relied on the following posts / urls to find my way through the possible values accepted by the 2nd parameter but can get what goes wrong.

stack overflow discussion _themes.scss custom theming

Edric
  • 24,639
  • 13
  • 81
  • 91
Jem
  • 6,226
  • 14
  • 56
  • 74

1 Answers1

6

Ok, found my mistake:

$text: map-get($theme, text);
  $card: map-get($theme, card);
  $lighter: map-get($theme, lighter);
  $darker: map-get($theme, darker);

  .test{
    font-size: 5em;
    color: mat-color($darker)!important; // fails because $darker isn't called on foreground
    }

Solution: text, card, etc. are present on the "$foreground" and "$background" maps:

@mixin app-component-theme($theme){

  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

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

  $text: map-get($foreground, text);
  $card: map-get($background, card);

  .crap{
    font-size: 5em;
    color: $text;
    background-color: $card;
  }
}
Jem
  • 6,226
  • 14
  • 56
  • 74
  • Do you typically do general styling all in that one theme page like with the extra class? – Z. Bagley Oct 11 '17 at 01:00
  • I create two separate scss files: one for the general styling (flex, borders, etc.) and the other exclusively for the styling. I followed the tutorial found at this URL that explains each step: https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 – Jem Oct 11 '17 at 09:55