Question

我是角度4和角度材质的新手。目前我正在使用角度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);

Answer 1

如果您使用的是Angular CLI，则需要将此文件包含在文件styles的{{1}}数组属性中，以确保构建过程包含此自定义主题你的申请。

.angular-cli.json

如果您不使用Angular CLI，则需要使用某种构建过程或至少使用... "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" } ...等工具将SCSS编译为CSS。编译完成后，您需要以node-sass：

之类的方式链接到该文件

index.html

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

对于<!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变量，可以在source中的$mat-indigo中找到这些变量，并与Material Design Colors的颜色相关联。这些变量可以根据您的设计需要在自定义主题SCSS文件中使用。因此，您尝试引用_palette.scss的颜色不是有效/现有的调色板/并且可能无法按预期显示。您反而会定位现有的调色板，例如$mat-light-orange，并使用可选参数来定位特定的色调，例如$mat-orange，这些色调来自颜色代码A200。 #FF9100和mat-pallete()是Angular Material source中的自定义Sass @functions，它接受调色板等输入并生成/编译主题CSS。

mat-light-theme()

希望这有帮助！

Answer 2

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

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

或者，您可以在全局styles.scss文件中导入它：

@import 'custom-theme.scss';

mat-palette

的含义是什么？

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

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

我希望这可以帮到你！

角度4自定义主题

2 个答案: