材质2 paletta对比度颜色
材质2 paletta对比度颜色
提问于 2017-04-24 14:47:07
在paletta中，我可以看到对比。如何选择对比度颜色？
作品：
scss
mat-color($button-primary);不工作
scss
mat-color($button-primary, contrast(900));看底部写着对比度。
scss
$mat-red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);如何使用对比度？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-31 21:35:38
如果使用自定义主题，有时获取默认、较亮或较暗预设的对比度很有用。例如，在styles.scss中，您可以设置以下自定义主题：
$default-primary: mat-palette($mat-blue, 500, 300, 700);
$default-accent: mat-palette($mat-red, 500, 50, 900);
$default-warn: mat-palette($mat-deep-orange);
$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);
@include my-component-theme($default-theme);然后，在组件主题中，您可以执行以下操作：
@mixin my-component-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.test {
color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
}
}Stack Overflow用户
发布于 2017-07-19 22:04:29
color: mat-contrast($mat-red, 900);参考链接：https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4
Stack Overflow用户
发布于 2017-06-04 00:30:26
解决方案是：
.test {
color: mat-color($button-primary, 900-contrast)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43581477
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号