如何在Angular Material预制主题中仅更改原色?

时间:2018-11-20 18:44:31

标签: angular angular-material angular6 angular-material-6

我想使用Angular Material预先构建的主题,因为它有助于样式,例如按钮和表格。

但是,我需要将原色设置为与品牌样式指南完全匹配。可以仅在预建主题上更改原色吗?

或者,使用自定义主题并从预先构建的主题中引入按钮等的样式会更容易吗?如果是这样,那该怎么办?

以下是我当前的相关代码。 styles.css中的@import为我提供了Anuglar Material样式,但覆盖了我的品牌颜色设置。

angular.json:

"styles": [
  "src/styles.scss", 
  "src/styles.css"
],

styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

styles.scss:

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

$my-purple: (
  50: #e9e3ed,
  100: #c8b9d3,
  200: #a38bb5,
  300: #7e5c97,
  400: #623981,
  500: #46166b,
  600: #3f1363,
  700: #371058,
  800: #2f0c4e,
  900: #20063c,
  A100: #ad73ff,
  A200: #8f40ff,
  A400: #720dff,
  A700: #6500f2,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: white,
    500: white,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: $white-87-opacity,
  )
);

$primary: mat-palette($my-purple);
$accent:  mat-palette($my-purple, A200, A100, A400);
$warn:    mat-palette($mat-red);
$theme:   mat-light-theme($primary, $accent, $warn);

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

0 个答案:

没有答案