角度材质io预定义主题颜色 [英] Angular material io predefined theme color

问题描述

如何从预定义的角度主题@ angular/material/prebuilt-themes/deeppurple-amber.css'访问scss文件中的颜色变量($ primary，$ accent，$ warn，$ foreground，$ background)?

How do I access the color variables ( $primary, $accent, $warn, $foreground, $background) in scss file from a predefined angular theme @angular/material/prebuilt-themes/deeppurple-amber.css'?

推荐答案

将sass文件编译为css后，该css文件中将不再包含变量的概念，因此您将无法检索到诸如来自 deeppurple-amber.css 的 $ primary .

Once a sass file has been compiled to css, there is no more notion of variable inside that css file, so you won't be able to retrieve variables like $primary from deeppurple-amber.css.

如果您查看

If you look at the scss source file for the deeppurple-amber theme, you can find the definition for $primary and other variables

$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

您可以在项目中的'〜@ angular/material/theming';

因此，要检索调色板和颜色，可以尝试以下操作:

So to retrieve the palettes and colours, you can create try this:

步骤#1 创建文件 mat-vars.scss 文件

mat-vars.scss

@import '~@angular/material/theming';
//And then retrieve the palette

$myPrimaryPaletteVariable : mat-palette($mat-deep-purple);
$myAccentPaletteVariable : mat-palette($mat-amber, A200, A100, A400);

//Retrive the colors you need
$myPrimaryColor : mat-color($myPrimaryPaletteVariable);

第2步 ，在您的组件scss文件中，只需导入该新文件并使用变量

Step #2 In your components scss files, just import that new file and use the variables

component.scss

@import '../../mat-vars';//ensure path is correct
.myText
{
    color: $myPrimaryColor;
}

这篇关于角度材质io预定义主题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！