为 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