Настраиваемая тема применяется к цвету переднего плана пользовательского компонента не применяется
Попытка применить пользовательскую тему (цвет) для пользовательского компонента, но не применяет что-то, что я пропустил здесь, может подсказать мне, что я пропустил.
Цвет фона работает, но цвет текста не влияет.
в theme.scss
@import '~@angular/material/_theming.scss';
@include mat-core();
$mat-theme1: (
0: #ffffff,
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #ff0000,
600: #bdbdbd,
700: #bdbdbd,
contrast: (
0: $black-87-opacity,
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: $black-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity
)
);
$mat-theme2: (
0: #ffffff,
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #530202,
600: #bdbdbd,
700: #bdbdbd,
contrast: (
0: $black-87-opacity,
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: $white-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity
)
);
$customTheme-primary: mat-palette($mat-theme1);
$customTheme-accent: mat-palette($mat-brown, A200, A100, A400);
$customTheme-warn: mat-palette($mat-cyan);
$light-theme: mat-light-theme(
$customTheme-primary,$customTheme-accent,$customTheme-warn
);
@mixin custom-theme($theme) {
@include customComponent($theme);
}
@include angular-material-theme($light-theme);
@include custom-theme($light-theme);
в style.scss
@mixin customComponent($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
.box {
background-color: mat-color($warn);
color: mat-color($foreground, text);
}
}
Кое-что, что я привожу пользовательскую тему для пользовательского компонента, она работает нормально, но основной цвет не берет.