角度4自定义主题-Java 学习之路

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

2 回答

0
如果您使用的是Angular CLI，则需要将此文件包含在文件 .angular-cli.json 的 styles array属性中，以确保构建过程在您的应用程序中包含此自定义主题 .
```
...
"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 ，isn 't a valid/existing palette/ and may not come out as you expect. You' d反而定位现有的调色板，例如 $mat-orange ，并使用可选参数来定位特定色调，例如 A200 ，颜色代码为 #FF9100 . mat-pallete() 和 mat-light-theme() 是Angular Material source中的自定义Sass @functions，它接受调色板等输入并生成/编译主题CSS .

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

希望这有帮助！
回复于 2024-04-26T14:48:30+08:00
0
您可以在 .angular-cli.json 文件中插入主题：
```
"styles": [
    "styles.scss",
    "custom-theme.scss"
]
```
或者，您可以在全局 styles.scss 文件中导入它：
```
@import 'custom-theme.scss';
```
What is the meaning of 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）指定了调色板的默认，更亮和更暗的对比度 .

我希望这可以帮助你！
回复于 2024-04-26T14:48:30+08:00

角度4自定义主题

2 回答

相关问题