Angular 材质自定义颜色

Question

我想为我的材质主题使用 3 种以上的颜色。 例如，我想在我的 Material 组件中添加 $theme-success: mat-pallete($mat-green) 以具有绿色的成功颜色，例如md-checkbox color="success"。

@import '~@angular/material/theming';
@include mat-core();

$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-yellow, A400, A200, A600);
$theme-warn: mat-palette($mat-red);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

.body-light {
  @include angular-material-theme($theme);
}

这可能吗？

Answer 1

color 绑定仅支持主要、重音和警告。

如果颜色比较简单（对于复选框来说，就是.mat-checkbox-background和.mat-ripple-element），你可以自己使用调色板：

$theme-success: mat-palette($mat-green);

.mat-checkbox-ripple .mat-ripple-element {
  background-color: mat-color($theme-success, 0.26);
}

您可能还可以制作 2 个主题，其中第二个使用您的成功颜色作为 primary

$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-yellow, A400, A200, A600);
$theme-warn: mat-palette($mat-red);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

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

.body-light {
  @include angular-material-theme($theme);
}

.component-success {
  @include angular-material-theme($theme2);
}

Answer 2

另外，如果你真的需要额外的颜色，你可以在styles.scss（或.css）或样式表的任何地方创建类。

.mat-buttonSuccess{
    background-color: #ffff00;
    color: #000;
}

然后以与主要、重音和警告相同的方式将其称为颜色。

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

Answer 3

为了充分利用按钮功能，我做了以下操作

1. 我在我的主主题文件 _theme.scss 上创建了一个调色板

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$my-app-primary: mat-palette($mat-deep-purple);
$my-app-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-app-green:  mat-palette($mat-green);  // <------ My new palette

// The warn palette is optional (defaults to red).
$my-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($my-app-theme);

@import './buttons';

1. 我在 _buttons.scss 中定义了我的覆盖

.mat-raised-button {
  &.mat-green {
    color: mat-color($my-app-green, darker-contrast);
    background-color: mat-color($my-app-green, default);
    
    &[disabled] {
      color: mat-color($mat-light-theme-foreground, disabled-button);
      background-color: mat-color($mat-light-theme-background, disabled-button);
    }

    .mat-ripple-element {
      @include _mat-button-ripple-background($my-app-green, darker-contrast, $_mat-button-ripple-opacity);
    }
  }
}

我需要弄清楚这些的一切都在\node_modules\@angular\material\_theming.scss

从here出发