angular 4 自定义主题答案

【问题标题】：angular 4 custom themeangular 4 自定义主题
【发布时间】：2017-08-22 18:04:07
【问题描述】：

我是 Angular 4 和 Angular 材料的新手。目前我正在使用 Angular 4 并尝试创建自定义主题。在创建 custom-theme.scss 文件时，我们使用变量将颜色分配给主要、重音和警告，如下所示，

$my-app-primary: mat-palette($mat-light-orange);
$my-app-accent: mat-palette($mat-white);
$my-app-warn: mat-palette($mat-red);

我对这个mat-palette($mat-light-orange); 有点困惑，因为我无法理解它将变量分配给主要颜色、重音颜色和警告颜色的方式。 mat-palette 是什么意思，我们如何为其分配自定义颜色？

这是我在 custom-theme.scss 中使用的代码，但它不起作用。

@import '~@angular/material/theming';
@include mat-core();
$mat-light-orange:#fbab4a;
$mat-white:#ffffff;
$mat-red:#e95337;
$my-app-primary: mat-palette($mat-light-orange);
$my-app-accent: mat-palette($mat-white);
$my-app-warn: mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

【问题讨论】：

你在使用 Angular CLI 吗？如果是这样，您是否将custom-theme.scss 包含在angular-cli.json 的styles 数组属性中？如果没有，您是否将此 scss 文件编译为 css 并将其包含在 index.html 或类似文件中？
是的，我正在使用 Angular CLI，它已经包含在 angular-cli.json 文件中，如下所示，“styles”：[“styles.scss”，“custom-theme.scss”]，但还是不行
好的，这意味着您传递给mat-pallete() sass @function 的$mat-light-orange 等值无效。 Angular Material 源文件中有预定义的调色板变量。请参阅我的回答以获取更多信息。
是的，这就是问题所在。谢谢。现在它正在工作。

标签： angular angular-material2 custom-theme

【解决方案1】：

如果您使用Angular CLI，则需要将此文件包含在文件styles 的数组属性中.angular-cli.json 以确保构建过程在您的应用程序中包含此自定义主题。

...
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
  "styles.css",
  "custom-theme.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}
...

如果您不使用 Angular CLI，则需要使用某种构建过程或至少使用诸如 node-sass 之类的工具来将 SCSS 编译为 CSS。编译后，您需要以 index.html 之类的方式链接到该文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Foobar</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="path/to/compiled/assets/custom-theme.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

仅创建 SCSS 文件可能还不够。这取决于您用于检测和处理 SCSS 样式文件等资产的构建过程。

关于诸如$mat-indigo 等颜色的SCSS 变量，这些变量位于source 内的_palette.scss 中，并与Material Design Colors 的颜色相关联。这些变量可以根据您的设计需要在您的自定义主题 SCSS 文件中使用。因此，您尝试引用的颜色 $mat-light-orange 不是有效的/现有的调色板/并且可能不会像您预期的那样出现。相反，您将定位现有的调色板，例如$mat-orange，并使用可选参数来定位特定的色调，例如A200，它会出现颜色代码#FF9100。 mat-pallete() 和 mat-light-theme() 是 Angular Material source 中的自定义 Sass @函数，它们接受诸如调色板之类的输入并生成/编译主题 CSS。

$my-app-accent: mat-palette($mat-orange, A200);

希望对您有所帮助！

【讨论】：

谢谢，它正在工作。我认为分配颜色时出现问题。

【解决方案2】：

您可以在.angular-cli.json 文件中插入主题：

"styles": [
    "styles.scss",
    "custom-theme.scss"
]

或者，您可以将其导入到您的全局 styles.scss 文件中：

@import 'custom-theme.scss';

mat-palette是什么意思

mat-palette 是一个混合组件，可为您的应用程序生成调色板。它为材料组件所需的文本、背景等生成颜色。您所要做的就是插入一些 material colors 作为参数到 mix-in：

$app-primary: mat-palette($mat-indigo, 800, 300, 900);
$app-accent: mat-palette($mat-light-blue);
$app-warn: mat-palette($mat-deep-orange, A200);

颜色变量后面的数字（例如 $mat-indigo、800、300、900）指定调色板的默认、较浅和较深对比度。

希望对你有帮助！

【讨论】：