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