0

我是 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);
4

2 回答 2

0

如果您使用的是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 样式文件）的构建过程。

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

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

希望这会有所帮助！

于 2017-08-22T19:56:58.437 回答
0

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

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

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

@import 'custom-theme.scss';

mat-palette是什么意思

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

$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）指定了您的调色板的默认、更亮和更暗的对比度。

调色板

我希望这可以帮助你！

于 2017-08-22T21:00:45.040 回答