在构建时更改 Angular Material 主题变量

Question

我需要自定义我的 Angular 6 应用程序以根据构建更改原色（我必须在开发和生产中将原色更改为另一种颜色）。是否有任何直接的解决方案可以在构建时更改颜色？

Answer 1

请检查此reported issue，似乎 6.1 版将支持文件替换，而不仅仅是打字稿文件。

如果是，您应该能够根据配置文件替换您的my-own-theme.scss。 （在 angular.json 中定义）

Answer 2

您可以使用css custom properties 动态更改css值。

设置 e。 G。在AppModule的构造函数中：

let primaryColor: string;
if (environment.production) {
  primaryColor = 'green';
} else {
  primaryColor = 'red';
}
document.documentElement.style.setProperty('--primary-color', primaryColor);

然后在你的css中使用这个值：

color: var(--primary-color)

有关 SASS 解决方案，请查看 this answer。