访问预建方案的主要颜色

Question

我使用

设置了一个新项目

ng new app

ng add @angular/material

我在styles.css中添加了以下行：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

我想将深红色 - 琥珀色主题的主要颜色应用于<p>元素。

如何提取预构建方案的原色并将其应用于Angular 6中我自己的组件？

Answer 1

不是导入预建主题，而是包含content of the pre-built theme。

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

// Include non-theme styles for core.
@include mat-core();

// Define a theme.
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

$theme: mat-light-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);

然后，您可以访问调色板和颜色以及theme your own components。