动态更改角度材质材质主题

Question

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

那么有没有简单快速且经过优化的方法来做到这一点？

PS 我已经浏览了许多帖子和文档，但是在动态更改主题时似乎很混乱，例如，如果我切换了，那么如何引用不同的样式而不是默认样式？

任何答案将不胜感激.. !!

Answer 1

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

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

这里有一个例子：

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