为 Angular Material 和自定义组件提供具有自定义颜色的多个主题

Question

我想在我的应用程序中添加一些主题，但除了 Angular Material 主题之外，我还想定义不属于 Angular Material 的特定组件和元素使用的自定义颜色。每当我更改主题时，这些自定义颜色也应该更改。 假设我有一个为每个主题定义颜色的文件，然后我想将其导入任意 scss 文件并利用颜色来设置某些元素的样式

@import "custom-colors"

.my-elem {
 color: $textColor;
}

然后，如果我需要更改主题，我会将特定类应用于应用程序的最外层容器，然后我希望 $textColor 具有另一个值，以便 @ 的 color 987654324@ 会改变。

有没有办法做到这一点而不写类似的东西

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

在每个应该受主题更改影响的组件中？

Answer 1

有 2 种方法可以更改主题
1. 添加父类到你的根组件
2. 更改文件名（作为angular material完成）

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">

有多种方法可以做到：Having global varible、Using Event Emitter

2。更改文件名，没有父类的同一个文件将分为light.css和dark.css

当用户更换主题时，您可以替换<link ref="stylesheet" href="light.css">

Angular 的做法是使用Rendere 2 Set Attribute