在Angular Material（2+）中添加自定义颜色变量

Question

如何为 angular material 创建“自定义”颜色？

例如，类似于 bootstrap 的颜色，如success（绿色），warn（黄色），danger（红色），除了primary（蓝色），accent（粉色）。

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

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

或者创建一个类似于白色复选框的：

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

- Dominik

---

你是否看过自定义Angular Material主题的指南？在这里。 - Jan Somers JanS91

是的，但我没有找到关于那个的任何信息。或者是我忽略了它。我只找到了如何修改现有颜色，比如“primary”。我在sass和主题方面是新手。这与通过html选择器设置css样式不同。:D - Dominik

点击我给你的链接（即“here”关键字）。 - Jan Somers JanS91

@JanSomersJanS91，请问文档中哪里提到了其他变量（例如'danger'）？我找不到。下面mohit的回答似乎满足了问题，但涉及编辑angular node_module文件，这似乎是一个难以维护的解决方案。 - bunt

也许这个答案能帮到某些人。它将为您提供类型提示。 - Poul Kruijt

Answer 1

你做不到它。但是，如果你想要的话，可以将“color = 任何颜色”属性添加到某些材料元素中，这会为你添加自定义类。

示例：

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

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

- andy

Answer 2

要添加名为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">

- sai anudeep

Answer 3

变量定义在“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文件。

- mohit uprim

---

除了primary、accent或warn，你的自定义颜色变量在哪里？你只能修改现有变量（primary、accent、warn）的颜色。但是是否可以创建一个新的颜色变量，例如命名为'$success'并在html属性color="success"中使用它？我认为这是不可能的，除非对material项目进行更改。因为你必须明确地将现有变量传递给主题。mat-light-theme(primary, accent, warn)。 - Dominik

@Dominik 是的，这是可能的，但需要修改材料项目。我已经在我的答案中更新了细节。 - mohit uprim

Answer 4

我在文件_theming.scss中的相应调色板中添加了一个新颜色，路径为PROJECT_NAME\node_modules\@angular\material_theming.scss，这对我有效，并成功通过了ng build --prod

您必须尊重颜色和字体之间的对比度，在我的情况下，颜色为#590F46，并与白色字体具有良好的对比度。

请按照以下步骤操作：

1. 将新颜色添加到相应的调色板中，例如我的$mat-pink（调色板从第500行左右开始，因此最好在文本编辑器中使用查找ctrl+f并搜索调色板名称）
2. 在名为contrast:的下一部分中选择字体颜色（$dark-primary-text或$light-primary-text），请遵守Material Design指南。
3. 记住！ node_modules文件夹不会被github / bitbucket等备份，因此如果您克隆此项目并使用npm install或其他原因，则必须备份此文件并将其替换为默认文件，建议仅添加自定义调色板部分，不要干扰其他代码

例子 在_theming.scss中仅使用调色板mat-pink的代码示例和 我的带有自定义主题的angular material2文件 抱歉我的英语不好，我只是想帮忙 :)

- Camilo Elgueta Basso

---

不要更改任何节点模块，因为当您尝试更新任何与npm相关的内容时，它将被简单地覆盖。 - Cameron Gilbert