标签: angular-material-theming

我正在使用有角度的材料，但在主题化方面有点迷失。我正在使用我的styles.scss 中包含的预构建的靛蓝色粉红色主题，如下所示

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

根据文档，我创建了一个名为 theme.scss 的新文件，并将其包含在 angular.json 之后的 style.scss 中。theme.scss 如下所示

@import '~@angular/material/theming';

@include mat-core();

$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

@include angular-material-theme($sg-app-theme);

我的要求 我只需要在所有地方将默认字体颜色更改为白色而不是黑色。我根本不需要改变任何其他东西。我只是从示例中复制了主要和重音调色板。所以感觉即使他们不需要改变。

我正在尝试实施 Angular Material Typography，但是我遇到了一些困难，我不确定可能是什么问题。

我按照 Angular在此处提供的说明进行操作，但是遇到了问题。问题是看起来应用程序中的所有内容都受到了影响，但是有些内容被看起来像默认排版的东西覆盖了，我不确定我做错了什么。

创建和使用的排版

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

正如您在排版中看到的100px那样，我故意设置了第一个参数（字体大小），以便我可以查看应用程序上的所有内容是否都受到影响。

示例 #1：材质按钮

对于 Angular Material 按钮（在 …

我尝试为我的角度材质主题添加更多颜色，我通过 map.deep-merge 函数在 style.scss 中添加了成功颜色

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as material;
@use "sass:map";

@include material.core();

$custom-primary: material.define-palette(material.$light-blue-palette);
$custom-accent: material.define-palette(material.$blue-palette, A200, A100, A400);
$custom-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);



$custom-theme: material.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));


$custom-theme: map.deep-merge(
  $custom-theme,(
    success: $custom-success,
    danger: $custom-danger,
    color:(
      success: $custom-success,
      danger: $custom-danger
    )
  )
    );

@include material.all-component-themes($custom-theme);

一切都正确编译，但是当我尝试将颜色应用于按钮时它看起来像这样

并且不知道为什么。

<button mat-raised-button color="success">Success</button>
<button mat-raised-button color="danger">Danger</button>

目前我正在使用 "@angular/material": "^13.2.4",

在 Angular Material 自定义主题文档中，我们将原色设置为靛蓝，如下所示：

$candy-app-primary: mat-palette($mat-indigo);

我在哪里可以引用该mat-palette()函数的所有可接受的参数？我想知道$mat-indigo上面例子中所有可能的颜色名称。在文档中找不到它。

谢谢。