angular 4 个自定义主题

Question

我是 angular 4 的新手，Angular material.Currently 我正在使用 angular 4 并尝试创建自定义主题。创建自定义 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 的含义是什么？我们如何为其分配自定义颜色？

这是我在自定义中使用的代码-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);

Answer 1

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

...
"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。编译后，您需要 link 到文件，如 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 and tie to the colors of Material Design Colors. These variables can be used within your custom theme SCSS file as needed for your design. So the color you are trying to reference $mat-light-orange, isn't a valid/existing palette/ and may not come out as you expect. You'd instead target the existing palettes such as $mat-orange and use the optional parameters to target specific hues such as A200 which comes out to color code #FF9100. mat-pallete() and mat-light-theme() are custom Sass @functions in the Angular Material source 中的 _palette.scss 中找到，这些变量接受诸如调色板之类的输入和 generate/compiles 主题 CSS.

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

希望对您有所帮助！

Answer 2

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

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

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

@import 'custom-theme.scss';

mat-palette是什么意思

mat-palette 是为您的应用程序生成调色板的混合。它为 material 组件所需的文本、背景等生成颜色。您所要做的就是插入一些 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）指定调色板的默认、较亮和较暗对比度。

希望对您有所帮助！

angular 4 个自定义主题

angular 4 custom theme

custom-theme

angular-material2

angular