Угловой материал, изменяющий цвет шрифта по умолчанию

Question

Я использую угловой материал и немного потерялся в тематике. Я использую готовую индиго-розовую тему, которая включена в мои styles.scss, как показано ниже

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

На основе документа я создал новый файл с именем theme.scss и включил его в angular.json после styles.scss. Theme.scss выглядит как ниже

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

@include mat-core();

$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

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

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

Answer 1

Я считаю, что этот пост отвечает на ваш вопрос: /questions/21177932/kak-izmenit-tsvet-shrifta-osnovnoj-palitryi-v-angular-material2/21177955#21177955. По сути, вам нужно создать собственную карту переднего плана и объединить ее с вашей темой. Комбинирование вашего фрагмента кода и приведенных в посте приведёт что-то подобное для ваших стилей.scss:

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

@include mat-core();

$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

@function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $white-12-opacity,
        dividers:          $white-12-opacity,
        disabled:          rgba($color, 0.38),
        disabled-button:   rgba($color, 0.38),
        disabled-text:     rgba($color, 0.38),
        hint-text:         rgba($color, 0.38),
        secondary-text:    rgba($color, 0.54),
        icon:              rgba($color, 0.54),
        icons:             rgba($color, 0.54),
        text:              rgba($color, 0.87),
        slider-off:        rgba($color, 0.26),
        slider-off-active: rgba($color, 0.38),
        slider-min:        rgba($color, 0.38)
    );
};

$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));

@include angular-material-theme($my-app-theme-custom);

/* For the non-Angular Material items */
body {
    color: white;
}

Answer 2

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

Эти функции также можно найти в scss, предоставленном файлом материала angular, и, если они импортированы, их можно использовать при создании конфигураций вашей темы.

Здесь они приведены для справки, чтобы вы могли увидеть, как они автоматически включают передний план и фон для светлых и темных тем. Такая классная работа у них.

       @function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}


@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}