為 Angular Material 和自定義組件提供具有自定義顏色的多個主題

Question

我想在我的應用程序中有一些主題，但除了 Angular Material 主題外，我還想定義由不屬於 Angular Material 的特定組件和元素使用的自定義顏色。 每當我更改主題時，這些自定義顏色也應該更改。 假設我有一個為每個主題定義顏色的文件，然后我想將它導入到任意 scss 文件中並利用這些顏色來設置一些元素的樣式

@import "custom-colors"

.my-elem {
 color: $textColor;
}

然后，如果我需要更改主題，我會將特定類應用於應用程序的最外層容器，然后我希望$textColor具有另一個值，以便.my-elem color會改變。

有沒有辦法做到這一點而不寫類似的東西

.another-theme {
 .my-elem {
   color: $textColorOfAnotherTheme;
 }
}

在每個應該受主題更改影響的組件中？

Answer 1

有兩種方法可以更改主題
1. 將父類添加到您的根組件
2. 更改文件名（作為角材料完成）

1.你可以添加帶有父類的css（下面的例子）

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

當用戶更改主題時，您可以更改根元素上的類<app-component class="light">

有多種方法可以做到：擁有全局變量， 使用事件發射器

2.更改文件名，同一個沒有父類的文件會被分成light.css和dark.css

並且在用戶更改主題時，您可以替換<link ref="stylesheet" href="light.css">

Angular 的做法是，使用Rendere 2 Set Attribute