Доступ к основному цвету готовых схем

Question

Я создал новый проект, используя

ng new app

ng add @angular/material

Я включил следующую строку в styles.css:

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

Я хочу применить основной цвет глубокой янтарной темы к элементу <p>.

Как мне извлечь основной цвет предварительно созданной схемы и применить его к моему собственному компоненту в Angular 6 ??

Answer 1

Вместо того, чтобы импортировать предварительно созданную тему, вместо нее включите содержимое предварительно созданной темы .

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

После этого вы можете получить доступ к палитрам и цветам и оформить свои собственные компоненты .