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

问题描述

我使用的是Angle 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.

推荐答案

添加在线演示

ADDED ONLINE DEMO

我正在一个使用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;
}

或者您可以从此处使用此材料颜色库

or you can use this material color library from here

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