Как изменить цвет шрифта основной палитры в Angular Material2?

в официальном тематическая документация углового Material2 в нем четко указано следующее:

в Angular Material тема создается путем создания нескольких палитр. В частности, тема состоит из:

  • основная палитра: цвета, наиболее широко используемых на всех экранах и комплектующие.
  • палитра акцентов: цвета, используемые для кнопки плавающего действия и интерактивных элементов.
  • предупреждения палитра: цвета, используемые для передачи состояния ошибки.
  • палитра переднего плана: цвета для текста и значков.
  • фоновая палитра: цвета, используемые для элементов фона.

но в каждом примере они изменяют только первые три:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

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

Итак, мой вопрос: Как я могу изменить палитру переднего плана, чтобы изменить цвет текста для первичной или вторичной палитры?

есть некоторые веб-сайты (materialpalette.com, материал.Ио), которые показывают цветовую палитру для легкой визуализации, но все же они не говорят, Как включить или изменить эту палитру в Angular Material2.

6
angular-material2 css fonts textcolor

3 ответов

вы можете изменить цвет темы по умолчанию, создав свою собственную карту переднего плана и объединить ее в созданную тему перед ее инициализацией. Вот как:

  1. создайте объект темы, как обычно.

    @import '@angular/material/theming.scss';
@include mat-core();

// Choose colors
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-light-green);
$my-app-warn:    mat-palette($mat-red);

// Build theme object (its practically a map object)
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

  2. создайте свой собственный передний план, используя пользовательскую функцию, возвращающую карту переднего плана, как определено в @angular/material/_theming.scss ->

9

руководство доступно на веб-сайте документации, расположенном здесь.

во-первых, вы определите палитры для вашей темы, такие как $primary, $accent, $warn (в руководстве у них $candy-app- префикс), а затем создать ушел. Вы можете сделать глобальный поиск для него, хотя: '$mat-dark-theme-background: ('

_theming.scss есть все цвета, карты и все функции, как mat-color

2

вот код:

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

вы можете найти карту по адресу: \node_modules\@angular\material\core\theming\ _палитра.scss

пример получения "вторичного текста":

$foreground: map-get($theme, foreground);

.foreground-color {
  color: mat-color($foreground, secondary-text);
}
1