代码之家 › 专栏 › 技术社区 › Jaume

生成时更改角度材质主题变量

angular-material-6 angular6 sass angular javascript

2

Jaume · 技术社区 · 8 年前

我需要定制我的Angular6应用程序来根据构建更改主颜色(我必须在开发和生产中将主颜色更改为另一种)。是否有任何简单的解决方案可以在构建时更改颜色?

2 回复 | 直到 8 年前

1

2

Kim Kern 8 年前

你可以用 css custom properties 动态更改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解决方案,请看一下 this answer .

2

Thierry Falvo 8 年前

请检查这个 reported issue ,似乎6.1版将支持文件替换,而不仅仅是typescript文件。

如果是,您应该能够替换 my-own-theme.scss 取决于配置配置文件。(在angular.json中定义)