Как изменить только основной цвет в готовой теме Angular Material? - PullRequest
Новая
       33

Как изменить только основной цвет в готовой теме Angular Material?

0 голосов
/ 20 ноября 2018

Я хотел бы использовать предварительно созданную тему Angular Material, поскольку она помогает стилизовать, например, кнопки и таблицы.

Однако мне нужно установить основной цвет, чтобы он точно соответствовал руководству по фирменному стилю.Можно ли изменить только основной цвет в предварительно созданной теме?

В качестве альтернативы, будет ли проще использовать собственную тему и добавить стили для кнопок и т. Д. Из предварительно созданной темы?Если это так, как это будет сделано?

Ниже приведен мой соответствующий код.@Import в styles.css дает мне стиль 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);
...