AngularCLI自定义主题（二）

AngularCLI自定义主题（二）

修改文件Angular Material主调色板的字体颜色

一个主题可以通过多个调色板来创建，在通常情况下，我们只修改
/主调色板中：在所有屏幕和组件中使用最广泛的颜色/
/重音调色板：用于浮动按钮和交互式原色的颜色/
/警告调色板：用于传达错误状态的颜色/

/*引入material自定义主题支持*/
@import '~@angular/material/theming';
/*引入material公用的主题风格*/
@include mat-core();/* 自定义颜色*/
/*主调色板中：在所有屏幕和组件中使用最广泛的颜色*/
$my-app-primary: mat-palette($mat-blue,800);
/*重音调色板：用于浮动按钮和交互式原色的颜色*/
$my-app-accent: mat-palette($mat-teal,600);
/*警告调色板：用于传达错误状态的颜色*/
$my-app-warn: mat-palette($mat-red,700);
/*利用自定义颜色组装自定义主题*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

那么如何修改主调色板的字体颜色呢？参考资料比较少，在此，通过一些网上资料写一篇作为自己的笔记
1.创建@angular/material/_theming.scss->$ mat-light-theme-foreground 函数，定义你想要的字段，其他字段为默认值。

@function my-mat-light-theme-foreground($color) {@return (base:              $color,divider:           $black-12-opacity,dividers:          $black-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),);
};// 你可以选择任何颜色
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));

2.把前面创建的主题与此合并，开始新的主题

$my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));

3.提交主题

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！