在我为演示而构建的角度应用程序中,我需要某种工具栏,我需要将其与背景区分开来。我愿意使用正在使用的预建主题的阴影(紫色绿色)。 我的理解是,Google的材料指南描述了原色的阴影:https://material.io/resources/color/#!/?view.left=0&view.right=0对于我的情况来说是理想的
我正在努力寻找如何做这么简单的事情。在ionic中,您可以使用color="primary"
,但是在这里,
我在styles.scss中使用的是预建主题之一:
@import '@angular/material/prebuilt-themes/purple-green.css';
我尝试了几件事
@import '~@angular/material/theming';
.chat-header {
color: mat-color($primary);
}
我的理解是,由于此预建主题只是纯CSS,因此没有SCSS变量。但是我应该如何在我的组件之一中使用它们的颜色?
我可以使用一些预定义的CSS类吗?我已经搜索了,但是没有找到?
答案 0 :(得分:0)
我想您将不得不采用主题定义的scss
版本,并根据自己的喜好提取调整后的值。
scss
的来源似乎并不与材料分布捆绑在一起,因此请转到https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss查看其来源。
然后:
my-custom-theme-definition.scss
@import '~@angular/material/theming';
// taken from https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss
// Define a theme.
$my-custom-primary: mat-palette($mat-purple, 700, 500, 800);
$my-custom-accent: mat-palette($mat-green, A200, A100, A400);
$my-custom-theme: mat-dark-theme((
color: (
primary: $my-custom-primary,
accent: $my-custom-accent
)
));
my-custom-theme.scss
(以您的globals.scss一次导入)
@import 'my-custom-theme-definition';
// IMPORT ONLY ONCE, AS ALL STYLES ARE BEING OUTPUT
// Include non-theme styles for core.
@include mat-core();
// Include all theme styles for the components.
@include angular-material-theme($my-custom-theme);
other-component.scss
@import 'my-custom-theme-definiton';
.chat-header {
color: mat-color(map-get($my-custom-theme, primary), 'lighter'); // or 'darker' or some value defined in https://github.com/angular/components/blob/master/src/material/core/theming/_palette.scss#L105
}