我想使用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);