访问预建方案的主要颜色(Access primary color of prebuilt schemes)

访问预建方案的主要颜色(Access primary color of prebuilt schemes)

我使用了一个新项目

ng new app

ng add @angular/material

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

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

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

我如何提取预构建方案的主要颜色并将其应用到我自己的Angular 6组件？

I set up a new project using

ng new app

ng add @angular/material

I included the following line in styles.css:

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

I want to apply the primary color of the deeppurple-amber theme to a <p> element.

How can I extract the primary color of a prebuilt scheme and apply it to my own component in Angular 6??

最满意答案

而不是导入预建主题，而是包含预建主题的内容 。

@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);

然后，您可以访问调色板和颜色，并为您自己的组件创建主题 。

Instead of importing the pre-built theme, include the content of the pre-built theme instead.

@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);

You can then access the palettes and colors and theme your own components.