如何修改angular Material主題主色

Question

我創建了一個新的 angular5 項目，在該項目上我將 angular 材料用於前端組件（ https://material.angular.io/ ）。 到目前為止一切都很好，但主要問題是如何添加自定義主題。 我沒有在這個項目中使用 scss 編譯器，所以我所做的是將所有 css 組件導入 style.css 中

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";

問題是我不知道如何修改預建主題的基色或為我的主題生成另一個具有其他基色的 css。 如果有人可以幫助我，我將不勝感激！

Answer 1

這是關於如何定義自己的主題的非常描述性的指南（但您絕對應該查看上面@br.julien 發布的鏈接。）：

注意：如果您趕時間，只需向下滾動到此答案的底部即可獲取整個源代碼。

先決條件

• 如果您使用的是 CSS 文件，請將文件擴展名更改為.scss 。

• 如果您使用的是 Angular CLI，請在您的styles數組中，將styles.css更改為styles.scss ：

   "styles": [ "styles.scss" // <- Change to this ]

---

開始

1. 在styles.scss的頂部導入~@angular/material/theming styles.scss ：

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

2. 之后，在styles.scss添加@include mat-core() ，最好在導入行之后：

    @include mat-core();

3. 之后，為您的應用程序定義一些變量（ primary 、 accent和可選的warn ），然后將它們分配給名為mat-palette的函數：

    // I suggest that you should use another prefix, but `my-app` is fine as well // Primary colour $my-app-primary: mat-palette($mat-indigo); // Accent colour $my-app-accent: mat-palette($mat-pink, A200, A100, A400);

   對於所有調色板，請訪問源代碼 ( _palette.scss )。

   另外，在Material.io 指南中查看調色板的外觀。

4. 接下來，為您的應用程序的主題定義另一個變量，並將該主題包含為angular-material-theme的參數（將其放在您上面定義的變量之后）：

   （注意：選擇以下任一選項：）

   輕主題：

    $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent); @include angular-material-theme($my-app-theme);

   黑暗主題：

    $my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent); @include angular-material-theme($my-app-theme);

5. 你完成了！

完整的源代碼

這是一些完整的源代碼供您復制:)

styles.scss

@import '~@angular/material/theming';
@include mat-core();

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

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

（哇。所有這些只適用於 8 行代碼。）

無論如何，如果您想了解更多關於 Sass 的信息，請查看官方文檔！

Answer 2

由於您剛剛將 style.css 更改為 style.scss，因此未找到 scss 文件。

您需要更改您在 angular.js 中導入的樣式表：

// src/angular.json 
...
"styles": ["src/styles.scss"]
...