web-dev-qa-db-ja.com

angularデフォルトのフォント色を変更するマテリアル

私はangular素材とテーマで少し失われました。私は以下のように私のstyles.scssに含まれているビルド済みのIndigo-pinkテーマを使用しています。

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

ドキュメントに基づいて、theme.scssという新しいファイルを作成し、styles.scssの後にangular.jsonに含めました。 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);

私の要件どこでもデフォルトのフォントの色を黒ではなく白に変更する必要があるだけです。他に何も変更する必要はありません。私は例から、プライマリとアクセントのパレットをコピーしました。そのため、それらを変更する必要はありません。

cssangularangular-materialangular-material-theming
5
Moblize IT

私はこの投稿があなたの質問に答えると信じています： https://stackoverflow.com/a/46157803/10730815 。基本的に、カスタムの前景マップを作成し、それをテーマにマージする必要があります。コードスニペットと上記の投稿のスニペットを組み合わせると、styles.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;
}
1
codequiet