Как я могу использовать пользовательские цвета материала вне файла темы node_modules? - PullRequest
Новая
       47

Как я могу использовать пользовательские цвета материала вне файла темы node_modules?

0 голосов
/ 16 апреля 2019

Я добавил собственную тему материала с новыми основными / акцентными / предупреждающими цветами, которые я определил сам в node_modules / angular / material / _theming.scss. Могу ли я объявить мои новые цвета в другом месте, чтобы я мог добавить тему на Github для моих коллег?

Основная проблема состоит в том, что тест CI круга не пройдет, пока переменные цвета не станут частью файла node_modules.

Вот мой файл theme.scss 

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

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);

theme.scss импортируется в мой глобальный style.scss вот так 

@import "theme.scss";
@include mat-core();
@include angular-material-theme($blockframes-theme);
@import '~@angular/material/theming';

...

Мои собственные цвета объявлены таким образом в _theming.scss 

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

Заранее благодарим за помощь и советы.

1 Ответ

0 голосов
/ 16 апреля 2019

Что ж, я получил действительно простое решение своей проблемы, просто объявите новые цвета в начале файла theme.scss, и он выполнит свою работу. 

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

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);
...