Question

我想为我的素材主题访问超过3种颜色。例如，我想添加$ 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

我做了以下事情以充分利用按钮功能

我在主主题文件_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';

我在_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的起点

角度材质自定义颜色

3 个答案: