Angular 预建主题是如何生成的？

Question

我在看Theme Guide

它告诉我有几个可用的预建主题：

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 是一个。

这些主题从何而来？

我的问题源于尝试创建自己的主题。例如，如果我遵循优秀的angular-ngrx-material-starter black-theme.scss，那么我似乎没有定义足够的颜色。我的 mat-select 没有样式。

我需要添加上面的预建主题之一以获得完整的主题，但现在我的主题中有紫色和我不想要的一般颜色不匹配。显然，我的主题中缺少所有颜色。

我觉得如果我能看到预建主题的 "source"，我可能会对如何制作自己的主题有所了解。

有人能帮我解释一下吗？

Answer 1

拍摄答案

如果您的 angular 项目正在使用 scss，请为您解答。如果您像上面给出的示例那样使用 angular material 模块中的默认口味，那么颜色肯定存在。您可能只是没有添加覆盖主题。 Mat-select 是一个 overlay

在你的主

main.scss

@import '../node_modules/@angular/material/theming';

$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);

$anms-black-theme: mat-dark-theme(
    $anms-black-primary,
    $anms-black-accent,
    $anms-black-warn
);
@include angular-material-theme($anms-black-theme);
.whatever-theme {
  @include angular-material-theme($anms-black-theme);
}

app.component.ts

export class AppComponent {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('whatever-theme');
  }
}

预建主题只是通过编译scss文件生成的。大多数主题变量和函数都在 node_modules/@angular/material/_theme.scss

例子 $(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css

长答案

要了解 angular 中的主题，您必须对 scss 有基本的了解，这是在 angular.

中生成主题的默认方式

https://sass-lang.com/guide

在适当的 angular 项目中有一个很好的 scss 样式示例将是 material 文档库。 https://github.com/angular/material.angular.io。

在node_modules/@angular/material/_theming.scss中可以看到主题变量是如何定义的，可以自己定义自定义主题。

创建自定义主题的好答案。

Angular 预建主题是如何生成的？

How are Angular Prebuilt Themes generated?

angular-material2