动态更改角形材质主题

时间:2020-09-03 21:29:36

标签: angular-material angular9

我对Angle还是陌生的,并且想动态地更改角度材质主题,我知道如何通过制作scss文件来定义不同的主题,定义3种颜色,包括mat属性和功能,但是后来我添加了文件引用在angular.json中是静态的,但是如果我有很多自定义的角度材质主题,我想动态地引用css文件。

那么,有没有一种简便,快速且经过优化的方法来做到这一点?

PS我已经浏览了许多帖子和文档,但是在动态更改主题方面似乎有些混乱,例如,例如,如果我有切换然后如何引用不同的样式而不是默认样式?

任何答案都将得到感激.. !!

1 个答案:

答案 0 :(得分:1)

一种解决方案是实时构建材质调色板。这些是必要步骤:

  1. 在CSS变量中定义调色板,然后访问它们。
  2. 将这些变量分配给实际的角度主题。
  3. 使用“ tinycolor”库,我们创建了一个服务来生成 基于颜色的调色板。
  4. 使用JavaScript,我们更新DOM中的CSS变量。

以下是一个示例:

https://stackblitz.com/edit/angular-material-theming-playground