使用主题颜色的角度材料

Question

我使用的是角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);
    }

我的默认styles.scss在style.scss下面

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

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

该颜色目前硬编码在fa图标-导航中。我希望它使用当前选定的主题的主颜色。如果可能的话，请提供建议。很高兴听到这样做是完全错误的，以及应该如何做。

Answer 1

编辑：

添加在线演示

我正在做一个项目，我使用材料2主题，我使用这种方法，我使用类名，并在全球添加颜色类。

我就是这样做的：

FileName:我的主题-Sideemenu.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
  }
}

这已经被问到了，我只是从这里复制我的答案

编辑:

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

，我的默认styles.scss在style.scss下面，您需要将其更改为_theme. that

 .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;
}

或者您可以使用这里中的材料颜色库。