如何在Angular Material中自定义主题颜色的方法

总结

我在使用Angular Material时记录下了自定义主题颜色的方法。

前提

只需要一个选择。

以下是截至2019年1月1日的信息。同时，假设以下为当前环境。

• Angular CLI： 7.0.6

• Node.js： 10.15.0

• npm： 6.4.1

Angular Material の導入が完了していること

请参考“这篇文章”以了解Angular Material的安装方法。

关于主题颜色更改的方法，请参考官方参考资料中的”这里”。

步骤 (bù

在定义整个应用程序共同样式的文件中，按照以下方式进行追加。

/* ::::: テーマカラーのカスタマイズ ::::: */

// テーマ操作関数をライブラリからインポート
@import '~@angular/material/theming';

// Angular Material の共通スタイルをインクルード
@include mat-core();

// 色定義： オプションは hue カラーパレットで色コード指定, 参照: https://material.io/design/color/ and https://material.io/tools/color/
$my-app-primary: mat-palette($mat-light-blue, 800);
$my-app-accent:  mat-palette($mat-cyan, 600);
$my-app-warn:    mat-palette($mat-pink, 500, 900, A100);

// テーマとして色定義をまとめる
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

// カスタムテーマを適用
@include angular-material-theme($my-app-theme);

/* ::::: アプリ全体のスタイルを以下に指定 ::::: */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

结果 (jié guǒ)

打开应用并查看设计。

改动之前

更改后

主要、強調、警告のカラーリングがちゃんと変更されました。, , de gā le.)