Angular 材质 io 预定义主题颜色

Posted 2023-03-07

【中文标题】Angular 材质 io 预定义主题颜色

【英文标题】：Angular material io predefined theme color

【发布时间】：2019-05-12 00:29:25

【问题描述】：

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

【问题讨论】：

您可以按照本指南进行操作：material.angular.io/guide/theming

【参考方案1】：

创建_variable.scss

// Import material theming functions
@import '~@angular/material/theming';

// Create your Sass color vars
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

将 _variables.scss 导入到组件的 sass 文件中你想使用它的地方。

@import "~_variables.scss";
.selected 
  background-color: $accent;

不要忘记在 .angular-cli.json 文件中包含 theme.scss：

...
  "apps": [
  ...
  "styles": ["_variables.scss"]
  ]
  ...

如果你仍然没有得到，请通过这个链接 https://medium.com/@aleixsuau/how-to-use-angular-material-2-sass-variables-in-your-components-76ce0203f126

【讨论】：

上述解决方案适用于自定义主题。但是我已经导入了预定义的角度主题，并且不确定如何初始化 $app-primary、$app-accent 和 $app-warn..

【参考方案2】：

一旦将 sass 文件编译为 css，该 css 文件中就不再有变量的概念，因此您将无法从 deeppurple-amber.css 检索像 $primary 这样的变量。

如果您查看deeppurple-amber 主题的scss source file，您可以找到$primary 和其他变量的定义

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

mat-palette 函数和基本调色板颜色可在您的项目中从'~@angular/material/theming' 获得；

所以要检索调色板和颜色，您可以尝试以下创建：

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

ma​​t-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 文件中，只需导入该新文件并使用变量

component.scss

@import '../../mat-vars';//ensure path is correct
.myText

    color: $myPrimaryColor;

【讨论】：

感谢您的贡献。我希望这会像它帮助我一样帮助其他人

很高兴我能帮上忙