动态更改 Angular Material 主题

Question

我是Angular的新手，想要动态地更改Angular Material的主题。我知道如何制作不同的主题，即通过创建scss文件，定义三个颜色、包含mat属性和函数。但如果我有许多自定义的angular material主题，我希望能够动态地引用CSS文件。

那么是否有任何简单、快捷和优化的方法实现呢？

附言：我已经查看了许多文章和文档，但在动态更改主题方面似乎很混乱。例如，如果我有一个开关，如何引用不同风格而不是默认值？

有任何答案将不胜感激..！

- kushal Baldev

Answer 1

一种解决方案是实时构建材料颜色调色板。以下是必要的步骤：

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

这里有一个示例：

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

- Omar Arturo

---

当您在Angular中实现解决方案时，如果app-component.ts在运行时抱怨“tinycolor未定义”，那么我错过了什么？ - user3859651

我收到一个 NoSuchMethodError 错误：在 stackblitz 上的 null 对象上未找到 'write$1' 方法。 - h11