在我为演示而构建的angular应用程序中,我有一些工具栏,我需要把它与背景区分开来。我愿意使用我使用的预建主题的阴影(紫绿色)。我的理解是,谷歌的材料指南描述了原色的色调:https://material.io/resources/color/#!/?view.left=0&view.right=0,这将是我的案例的理想选择
我在努力想怎么做这么简单的事情。在ionic中,你可以使用color="primary"
,但是在这里,我在我的样式中使用了一个预构建的主题。
@import '@angular/material/prebuilt-themes/purple-green.css';
我试了好几种方法
@import '~@angular/material/theming';
.chat-header {
color: mat-color($primary);
}
我的理解是,由于这个预构建的主题只是纯CSS,它没有SCSS变量。但我该如何在我的一个组件中使用它们的颜色呢?
有没有一些预定义的CSS类可以使用?我找过了,没找到?
1条答案
按热度按时间lxkprmvk1#
我猜你将不得不求助于抓取
scss
版本的主题定义,并根据自己的喜好提取调整后的值。scss
源代码似乎没有与材料分发捆绑在一起,所以请转到https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss查看其源代码。然后:my-custom-theme-definition.scss
my-custom-theme.scss
(在globalstyles.scss中导入一次)other-component.scss