是否可以检索Angular 4 Material Theme的背景和前景调色板？

Question

我能够获得主要，重音和警告调色板并将其保存在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);

现在我可以使用css类设置自己的组件。但是，让我说我想制作一个卡css类（想不出一个更好的例子，我知道有一个卡组件），背景颜色比md-的正常背景略轻例如，sidenav-container。

我将如何处理这个问题？

我已经看了@ Theming your own components（遗憾的是它未被覆盖） 我偶然发现了this guide。

我尝试了这个 - 但是当我试图从前景中获取颜色时，我收到了以下错误：

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`

我希望我没有忽视一些明显的东西。任何形式的帮助将不胜感激：）

Answer 1

我认为关于如何将自定义主题应用于材质核心主题缺少一些东西。

在styles.scss - 文件中为自定义主题创建mixin：

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

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

之后你必须将mixin包含在材质主题中：

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

Angular Material 2中一个非常好的主题指导（包括自定义主题）由Tomas Trajan撰写：https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1