使用主题颜色的角材料 [英] angular material using theme colors

问题描述

我正在使用 angular 5 材料，我创建了一个 theme.scss 如下theme.scss

I am using angular 5 material and i created a theme.scss as below 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

I have my default styles.scss as below style.scss

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

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

颜色目前硬编码在 fa-icon-nav 中.我希望它使用当前选定主题的原色.如果可能，请告知这将如何工作?很高兴听到这是否完全是错误的做法以及应该如何做.

The color is currently hardcoded in the fa-icon-nav. I want it to use primary color from the currently selected theme. Please advise how this would work if possible? Happy to hear if this is totally the wrong way to do it and how it should be done.

推荐答案

添加在线演示

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

I am working on a project where I used the Material 2 Themes and I used this approach where I use the class name and add colors class globally.

这就是我所做的:

文件名:mytheme-sidemenu.scss:

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:

Here is my main theme file: 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 中更新:

and in app.module.ts update this :

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

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

This is already asked and I just copy paste my answer from here

根据您的需要，您可以实现:

As per your need, you can achieve this:

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

I have my default styles.scss as below style.scss that you need to change to _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;
}

或者你可以从这里

这篇关于使用主题颜色的角材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！