text 使用自定义组件的主题颜色

Posted 2021-05-02

https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

// theme.scss
@import '~@angular/material/theming';
@import 'custom-components-theme.scss';
$custom-typography: mat-typography-config( $font-family: '"Open Sans", sans-serif');
@include mat-core($custom-typography);
$primary-palette: mat-palette($mat-blue-grey, 600, 200, 800);
$accent-palette: mat-palette($mat-light-green, 500, 200, 800);
$warn-palette: mat-palette($mat-red);
$theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
@include angular-material-theme($theme);
@include custom-components-theme($theme);
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-brown);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
.unicorn {
    @include angular-material-theme($dark-theme);
    @include custom-components-theme($dark-theme);
}

// custom-components-theme.scss
@import 'app/credit-queue/credit-queue-list/credit-queue-list.component.scss';
@import 'app/shared/main-toolbar/main-toolbar.component.scss';
@mixin custom-components-theme($theme) {
    @include credit-queue-list($theme);
    @include main-toolbar($theme);
}

// main-toolbar-component.scss
@import '~@angular/material/theming';


@mixin main-toolbar($theme) {
    $primary: map-get($theme, primary);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    .toolbar {
        background: mat-color($primary) !important;
    }
}