Question

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

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

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

accent

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

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

Answer 1

变量在＆＃34; _theming.scss＆＃34;中定义。它位于＆＃34; node_modules / @ angular / material /＆＃34;。定义我们需要修改以下函数的自定义变量。

Throwable

在同一个文件中，我们也可以应用新引入的变量当我将它应用于按钮时到组件。

// 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,
  );
}

新的自定义变量可以添加到＆＃34; theme.scss＆＃34;文件

// 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');
  }

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

@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);
}

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

注意：我们需要照顾＆＃34; _theming.scss＆＃34;升级角度材料包时提交文件。

Answer 2

你做不到。但是，如果您愿意，可以在某些元素上添加“ color =“ whatever”属性，这会为您添加自定义类。

示例：

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

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

Answer 3

在您的主要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 4

我在 PROJECT_NAME \ node_modules \ @angular \ material_theming.scss 中的文件 _theming.scss 中的相应调色板中添加了新颜色，这对我来说是成功的，并且成功通过了 ng构建--prod

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

执行此操作

在我的案例$ mat-pink中，在对应的调色板中添加新颜色（调色板从第500行开始，因此最好在文本编辑器中使用 ctrl + f 查找调色板名称）
在名为对比度的下一部分：中，选择字体颜色（$ dark-primary-text或$ light-primary-text），请遵守材料设计准则。
记住！ node_modules文件夹不是由github / bitbucket等备份的，因此如果您克隆此项目并使用 npm install 或其他原因，则必须备份此文件并将其替换为默认文件，危险性较小，我的建议是只需添加您的自定义调色板选择，就不会与其他代码混淆

示例 Code example just palette mat-pink in _theming.scss 和 My file with custom themes for angular material2 对不起，我的英语我只是想帮助：）

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

4 个答案: