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

Question

我可以获取 primary、accent 和 warn 调色板并将它们保存在 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 classes 设计我自己的组件。但是假设我想制作一个带有背景的 card css class （想不出更好的例子，我知道有一个卡片组件）例如，颜色比 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

我认为您将自定义主题应用到 material 核心主题的方式有些缺失。

在您的 styles.scss 文件中为您的自定义主题创建一个 mixin：

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

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

之后，您必须将该 mixin 包含到 material 主题中：

@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

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

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

sass

theming

angular-material2

angular