访问预建方案的原色

Question

我使用

建立了一个新项目

ng new app

ng add @angular/material

我在 styles.css 中包含了以下行：

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

我想将 deeppurple-amber 主题的原色应用于 <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。

访问预建方案的原色

Access primary color of prebuilt schemes

angular-material

angular6