[英]How to use colors of the prebuilt angular-material themes?
In my angular app that I'm building for a demo, I've some kind of toolbar that I need to distinguish a bit from the background.在我为演示而构建的 angular 应用程序中,我有某种工具栏,我需要将其与背景区分开来。 I was willing to use a shade of the prebuilt-theme I'm using(purple-green).我愿意使用我正在使用的预建主题的阴影(紫绿色)。 My understanding is that google's material guide describe shades of the primary color: https://material.io/resources/color/#!/?view.left=0&view.right=0 that would be ideal for my case我的理解是谷歌的材料指南描述了原色的阴影: https : //material.io/resources/color/#!/?view.left=0&view.right=0这对我来说是理想的
I'm strugling to find how to do such a simple thing.我正在努力寻找如何做这么简单的事情。 In ionic, you could use color="primary"
, but here, I'm using one of the prebuilt theme in my styles.scss:在 ionic 中,您可以使用color="primary"
,但在这里,我使用的是 style.scss 中的预构建主题之一:
@import '@angular/material/prebuilt-themes/purple-green.css';
I tried several things我尝试了几件事
@import '~@angular/material/theming';
.chat-header {
color: mat-color($primary);
}
My understading is that since this prebuilt theme is just pure CSS, it doesn't have a SCSS variable.我的理解是,由于这个预构建的主题只是纯 CSS,它没有 SCSS 变量。 But how am I supposed to use their colors in one of my component then?但是我应该如何在我的一个组件中使用它们的颜色呢?
Is there some predefined CSS classes that I could use?是否有一些我可以使用的预定义 CSS 类? I've searched but didn't found any?我搜索过但没有找到?
I guess you will have to resort to grabbing the scss
version of the theme-definition and extract the adjusted values to your liking.我想您将不得不求助于主题定义的scss
版本并根据自己的喜好提取调整后的值。 The scss
sources don't seem to be bundled with the material distribution, so go to https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss to see its source. scss
源似乎没有与材料分发捆绑在一起,因此请转到https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss见其来源。 Then:然后:
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
(import once in your global styles.scss) my-custom-theme.scss
(在您的全局styles.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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.