如何使用预建的角材料主题的颜色？答案

【问题标题】：How to use colors of the prebuilt angular-material themes?如何使用预建的角材料主题的颜色？
【发布时间】：2020-10-23 20:59:55
【问题描述】：

在我为演示构建的 Angular 应用程序中，我有某种工具栏，我需要将其与背景区分开来。我愿意使用我正在使用的预建主题的阴影（紫绿色）。我的理解是，谷歌的材料指南描述了原色的色调：https://material.io/resources/color/#!/?view.left=0&view.right=0，这对我来说是理想的

我正在努力寻找如何做这么简单的事情。在 ionic 中，您可以使用 color="primary"，但在这里，我正在使用我的 styles.scss 中的预建主题之一：

@import '@angular/material/prebuilt-themes/purple-green.css';

我尝试了几件事

@import '~@angular/material/theming';
.chat-header {
  color: mat-color($primary);
}

我的理解是，由于这个预构建的主题只是纯 CSS，它没有 SCSS 变量。但是我应该如何在我的一个组件中使用它们的颜色呢？

是否有一些我可以使用的预定义 CSS 类？我已经搜索了，但没有找到？

【问题讨论】：

标签： css angular sass angular-material

【解决方案1】：

我想您将不得不求助于获取主题定义的scss 版本并根据自己的喜好提取调整后的值。 scss 来源似乎没有与材料分发捆绑在一起，因此请转到 https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss 以查看其来源。那么：

my-custom-theme-definition.scss

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

// taken from https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss

// Define a theme.
$my-custom-primary: mat-palette($mat-purple, 700, 500, 800);
$my-custom-accent:  mat-palette($mat-green, A200, A100, A400);

$my-custom-theme: mat-dark-theme((
  color: (
    primary: $my-custom-primary,
    accent: $my-custom-accent
  )
));

my-custom-theme.scss（在您的全局 styles.scss 中导入一次）

@import 'my-custom-theme-definition';

// IMPORT ONLY ONCE, AS ALL STYLES ARE BEING OUTPUT

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

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

other-component.scss

@import 'my-custom-theme-definiton';


.chat-header {
  color: mat-color(map-get($my-custom-theme, primary), 'lighter'); // or 'darker' or some value defined in https://github.com/angular/components/blob/master/src/material/core/theming/_palette.scss#L105
}

【讨论】：