[英]Angular material theme override
我在 _theming.scss 文件中找到
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
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),
disabled-list-option: map_get($mat-grey, 200),
);
我想将背景和其他组件更改为不同的颜色,例如白色。 有谁知道如何配置这些设置或覆盖它们? 添加带有白色背景的styles.css 不起作用。 任何其他设置似乎总是在编译时被这个 _theming.scss 覆盖
解决方案是创建一个自定义调色板并将该调色板应用于背景调色板。
例子:
/* Color Palette */
$your-palette: (
50: #E1ECF5,
100: #B5CEE5,
200: #84AED4,
300: #067fc3,
400: #018FD0,
500: #085DA9,
600: #0755A2,
700: #064B98,
800: #04418F,
900: #02307E,
A100: #ACC4FF,
A200: #79A0FF,
A400: #467CFF,
A700: #2C6AFF,
contrast: (
50: #ffffff,
100: #ffffff,
200: #ffffff,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
)
);
$mat-light-theme-background: (
status-bar: map_get($your-palette, 300),
app-bar: map_get($your-palette, 100),
background: map_get($your-palette, 50),
hover: rgba(black, 0.04),
card: map-get(map-get($your-palette, contrast), 50),
dialog: map-get(map-get($your-palette, contrast), 50),
disabled-button: rgba(black, 0.12),
raised-button: map-get(map-get($your-palette, contrast), 50),
focused-button: map_get($your-palette, 500),
selected-button: map_get($your-palette, 300),
selected-disabled-button: map_get($your-palette, 400),
disabled-button-toggle: map_get($your-palette, 200),
unselected-chip: map_get($your-palette, 300),
disabled-list-option: map_get($your-palette, 200),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.