Is it possible to retrieve the background and foreground palette of an Angular 4 Material Theme?

Question

I am able to get the primary, accent and warn palette and save them in scss vars:

$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
$primary: map-get($candy-app-theme, primary);
$accent: map-get($candy-app-theme, accent);
$warn: map-get($candy-app-theme, warn);

Now I am able style my own components with css classes. But lets say i want to make a card css class (couldn't think of a better example, i know there is a card component) with a background color slightly lighter than the normal background of a md-sidenav-container for example.

How would i approach this?

I already took a look @ Theming your own components (sadly its not covered) Also I stumbled across this guide.

I tried this - but as soon as I tried to get a color out of foreground I got the following error:

color: mat-color($foreground, text);
//Error

Module build failed:
undefined
         ^
      Argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
        node_modules/@angular/material/_theming.scss:1107, in function `map-get`
        node_modules/@angular/material/_theming.scss:1107, in function `mat-color`
        src/assets/scss/angular-material/main-theme.scss:22
      in C:\Users\tobia\Documents\frontend\node_modules\@angular\material\_theming.scss (line 1107, column 11)
Error:
undefined
         ^
      Argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
        node_modules/@angular/material/_theming.scss:1107, in function `map-get`
        node_modules/@angular/material/_theming.scss:1107, in function `mat-color`

I hope I didn't overlook something obvious. Any kind of help would be appreciated :)

Answer 1

I think there is something missing about how you apply the custom theme to the material core theme.

Create a mixin for your custom themes in your styles.scss-file:

@import 'app/components/ml-file-tree-theme.scss';

@mixin custom-theme($theme) {
  @include ml-file-tree-theme($theme);    
}

After that you have to include that mixin to material theme:

@include angular-material-theme($my-theme);  // default angular material theme
@include custom-theme($my-theme);            // include custom theme

A very good guide for theming (including custom themes) in Angular Material 2 is by Tomas Trajan: https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1