如何在角度组件中使用自定义主题

Question

如何在我的component.scss中使用自定义主题的原色和强调色？

styles.scss：

@import './themes';

themes.scss：

@import 'app/my.component.theme.scss';

@mixin my-components-theme($theme) {
  @include my-component-theme($theme);
  // ...
}

@mixin set-theme($theme) {
  @include angular-material-theme($theme);
  @include container($theme);
  @include flex-container-column();
  @include my-components-theme($theme);
}

// Theme MY Indigo / Red
$my-theme-primary: mat-palette($mat-indigo);
$my-theme-accent:  mat-palette($mat-red);

$my-light-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);

.my-light-theme {
  @include set-theme($my-light-theme);
}

my.component.scss：

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

@mixin my-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    .test-class {
        background-color: mat-color($primary, 1) !important;
    }
}

我现在希望在我的组件html中，具有“文本类”类的元素将具有红色背景色。但是该类还没有设置，我无法使用chrome开发工具进行检查。

Answer 1

检查此主题模块：https://www.npmjs.com/package/ngx-themes。它使您可以轻松地在角度应用程序中实现主题化]