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

Question

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

标签： javascriptangularsassangular6angular-material-6

Answer 1

您可以使用css 自定义属性来动态更改 css 值。

例如在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 解决方案，请查看此答案。