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

标签 javascript angular sass angular6 angular-material-6

我需要自定义我的 Angular 6 应用程序以根据构建更改主要颜色(我必须在开发和生产时将主要颜色更改为另一种颜色)。有没有简单的解决方案来更改构建时的颜色?

最佳答案

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

关于javascript - 在构建时更改 Angular Material 主题变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51154735/

相关文章:

Javascript - For循环仅影响数组中的最后一个元素

javascript - iframe 内的 $(body)

node.js - Sass 加载器在 webpack 中不起作用

css - 创建一个流动的网格 - 百分比似乎搞砸了

Angular 4 - 带参数的激活路线

html - 使用 ui-sref 和内部元素处理点击

javascript - 如何清除可视化以便为使用 svg 更新的可视化腾出空间?

JavaScript - 搜索数组中的第一个字符

angular - 使用 primeng p-datatable 自定义排序不起作用

Angular 2 Mobile Toolkit --mobile 标志不起作用