角度材料使用主题颜色

Question

我正在使用angular 5材质，我创建了一个theme.scss，如下所示 的 theme.scss

 @import '~@angular/material/theming';
    @include mat-core();

    $custom-primary: mat-palette($mat-deep-purple,600);
    $custom-accent:  mat-palette($mat-lime, 100);
    $custom-warn:    mat-palette($mat-red);

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

    @include angular-material-theme($custom-theme);

    // ALTERNATIVE THEME

    $alt-primary: mat-palette($mat-yellow);
    $alt-accent:  mat-palette($mat-grey, 200);

    $alt-theme: mat-dark-theme($alt-primary, $alt-accent);

    .alternative {
        @include angular-material-theme($alt-theme);
    }

我的默认样式.scss如下所示 的 style.scss

   @import "~@angular/material/prebuilt-themes/indigo-pink.css";

        .fa-icon-nav {
            color: #507889;
            font-size: x-large;
        }

当前颜色在fa-icon-nav中进行了硬编码。我希望它使用当前所选主题的原色。如果可能，请告知如何使用它？很高兴听到这是完全错误的做法以及如何做到这一点。

Answer 1

修改

<强> ADDED ONLINE DEMO

我正在开发一个使用Material 2主题的项目，我使用这种方法，我使用类名并全局添加颜色类。

这就是我所做的：

FileName：mytheme-sidemenu.scss：

// Import all the tools needed to customize the theme and extract parts of it
@import "~@angular/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}

这是我的主题文件：mytheme-theme.scss：

@import '~@angular/material/theming';
@import './variables/helper.scss';
@import './variables/spacemanager.scss';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-light-blue, 700, 600);
$mytheme-app-accent: mat-palette($mat-pink, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-blue-grey, 500);
    $mytheme-alt-accent: mat-palette($mat-pink, 500);
    $mytheme-alt-warn: mat-palette($mat-deep-orange);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

并在app.module.ts中更新：

export class AppModule {
  constructor(
    @Inject(OverlayContainer) private overlayContainer: OverlayContainer
  ) {
    this.overlayContainer
      .getContainerElement()
      .classList.add("mytheme-alt-theme"); // this for double theme add to the root css class
  }
}

已经问过这个问题，我只是从here

复制粘贴我的回答

编辑：

根据您的需要，您可以实现这一目标：

我的默认styles.scss如下所示：style.scss ，您需要更改为_theme-color.scss

 .fa-icon-nav {
  color: mat-color($primary, 500) !important; // 500, 600 , 700 check material color pallet for more info
  // You can use this too
  // color: mat-color($alt-primary, 500) !important;
  font-size: x-large;
}

或者您可以使用here

中的此材质颜色库