我很难改变 Angular 2 Material 的前景颜色。例如在工具栏中,文本是黑色的。我尝试用以下样式更改它
@import '~@angular/material/theming';
$primary: mat-palette($mat-cyan, 300);
$accent : mat-palette($mat-yellow, 500);;
$warn : mat-palette($mat-red, 600);
$theme-foreground: (
base: gray,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba(200, 200, 200, 0.38),
disabled-button: rgba(200, 200, 200, 0.38),
disabled-text: rgba(200, 200, 200, 0.38),
hint-text: rgba(200, 200, 200, 0.38),
secondary-text: rgba(200, 200, 200, 0.54),
icon: rgba(200, 200, 200, 0.54),
icons: rgba(200, 200 , 200, 0.54),
text: rgba(200, 200, 200, 0.87),
slider-min: rgba(200, 200, 200, 0.87),
slider-off: rgba(200, 200, 200, 0.26),
slider-off-active: rgba(200, 200, 200, 0.38),
);
$theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(200, 200, 200, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: $black-12-opacity,
raised-button: white,
focused-button: $black-6-opacity,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
);
$theme: (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $theme-foreground,
background: $theme-background
);
@include mat-core();
@include angular-material-theme($theme);
主色和强调色已更改,但前端未更改。 我该如何解决?
我也试过设置工具栏主题,但没有任何区别。
最佳答案
您设置自定义前景和背景的方式是正确的 - 但是,对于工具栏,字体颜色决定如下:
- 如果工具栏设置为主要/强调/警告颜色,请使用默认对比色
- 否则使用前景文本颜色
换句话说,如果您的工具栏颜色使用主调色板,您将不得不使用 $primary 的对比色 - 不推荐这样做,因为任何数量的 Material 组件都使用这些。最好采用老式的方式,手动更改工具栏颜色。
如果您真的下定决心,您可以使用您想要的对比色制作一个自定义的主要/强调调色板,并使用它来创建您的主题,如下所示: https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
我建议坚持使用灰度颜色来形成对比 - 在某些情况下,Material 会采用一种颜色并将其反转,因此您最终可能会得到一些古怪的东西。
关于Angular 2 Material 前景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45382529/