角度材料更改默认字体颜色-Java 学习之路

我正在使用棱角分明的材料，并且在主题上有点失落 . 我正在使用预先构建的indigo-pink主题，该主题包含在我的styles.scss中，如下所示

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

基于doc我创建了一个名为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);

My Requirement 我只需要将默认字体颜色更改为白色而不是黑色 . 我根本不需要改变任何其他东西 . 我刚从示例中复制了主要和重点托盘 . 所以感觉即使他们不需要改变 .

1 回答

我相信这篇文章回答了你的问题：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;
}

回复于 2024-04-29T09:41:43+08:00

角度材料更改默认字体颜色

1 回答

相关问题