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

Question

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

Answer 1

您可以使用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。

Answer 2

请选中此reported issue，看来6.1版将支持文件替换，而不仅仅是打字稿文件。

如果是，则应该可以根据配置文件来替换my-own-theme.scss。 （在angular.json中定义）