在角度材质中添加自定义颜色变量（2+）

Question

如何为角形材料创建“自定义”自己的颜色？

例如，引导程序像success（绿色），warn（黄色），danger（红色），primary（蓝色），accent（粉红色）旁边的颜色。

换句话说：扩展Angular Material（2+）的颜色变量n以在html属性中使用它：

<button mat-raised-button color="success">Success</button>

或创建一个白色复选框，例如：

<mat-checkbox color="white">Check me!</mat-checkbox>

Answer 1

要添加名为 的新颜色success，请进行以下更改

在你的主styles.css文件中添加以下样式

.mat-success {
  color: #fff !important;
  background-color: #28a745 !important;
}
.mat-success[disabled] {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

在组件中指定颜色名称

 <button mat-raised-button color="success">

Answer 2

变量定义在“node_modules/@angular/material/”下的“_theming.scss”中。要定义自定义变量，我们需要修改以下函数。

// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

在同一个文件中，我们还可以将新引入的变量应用于组件，就像我将它应用于按钮一样。

// Applies a focus style to an md-button element for each of the supported palettes.
@mixin _mat-button-focus-color($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-success .mat-button-focus-overlay {
    background-color: mat-color($success, 0.12);
  }
  &.mat-primary .mat-button-focus-overlay {
    background-color: mat-color($primary, 0.12);
  }
  &.mat-accent .mat-button-focus-overlay {
    background-color: mat-color($accent, 0.12);
  }

  &.mat-warn .mat-button-focus-overlay {
    background-color: mat-color($warn, 0.12);
  }

  &[disabled] .mat-button-focus-overlay {
    background-color: transparent;
  }
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-success .mat-ripple-element {
    background-color: mat-color($success, $hue, $opacity);
  }
  &.mat-primary .mat-ripple-element {
    background-color: mat-color($primary, $hue, $opacity);
  }
  &.mat-accent .mat-ripple-element {
    background-color: mat-color($accent, $hue, $opacity);
  }

  &.mat-warn .mat-ripple-element {
    background-color: mat-color($warn, $hue, $opacity);
  }
}

// Applies a property to an md-button element for each of the supported palettes.
@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  &.mat-success {
    #{$property}: mat-color($success, $color);
  }
    &.mat-primary {
    #{$property}: mat-color($primary, $color);
  }
  &.mat-accent {
    #{$property}: mat-color($accent, $color);
  }
  &.mat-warn {
    #{$property}: mat-color($warn, $color);
  }

  &.mat-success ,&.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
    &[disabled] {
      $palette: if($property == 'color', $foreground, $background);
      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin mat-button-theme($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-button, .mat-icon-button {
    background: transparent;

    @include _mat-button-focus-color($theme);
    @include _mat-button-theme-color($theme, 'color');
  }

并且可以在“theme.scss”文件中添加新的自定义变量

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

@include mat-core();

$primary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-blue);
$success: mat-palette($mat-blue);
$theme: mat-light-theme($success,$primary, $accent,$warn);

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

.dark-theme {
  $dark-success: mat-palette($mat-light-blue);
  $dark-primary: mat-palette($mat-light-blue);
  $dark-accent: mat-palette($mat-green);

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

  @include angular-material-theme($dark-theme);
}

现在我们可以在 html 中使用新变量：

<button  md-button color="success">Primary</button>

以下是修改后的 _theming.scss https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates的链接

注意：我们在升级angular-material 包时需要处理“_theming.scss”文件。

Answer 3

你做不到。但是，如果您愿意，可以在材料的某些元素中添加“ color =“ whatever”属性，从而为您添加自定义类。

例：

.whatever {
  background-color: light-blue;
}

<button mat-button color="whatever"></button> // this button will have '.mat-whatever' class.