动态更改 angular material material 主题
Change angular material material theme dynamically
我是 angular 的新手，想动态更改 angular material 主题，我知道如何制作不同的主题，即制作 scss 文件，定义 3 种颜色，包括 mat 属性和函数，但后来我在 angular.json 中静态添加了该文件引用，但如果我有许多自定义 angular material 主题，我想动态引用 css 文件。
那么有没有简单快速且相当优化的方法来做到这一点？
P.S 我浏览了很多 post 和文档，但在动态更改主题时似乎顺序混乱，例如，如果我有切换，那么如何引用不同的主题样式而不是默认样式？
任何答案将不胜感激..!!
一种解决方案是实时构建 material 调色板。这些是必要的步骤：
- 在 CSS 变量中定义调色板，然后访问它们。
- 将这些变量分配给 material angular 主题。
- 使用“tinycolor”库，我们创建了一个服务来生成
基于颜色的调色板。
- 使用 JavaScript 我们更新 DOM 中的 CSS 变量。
举个例子：
https://stackblitz.com/edit/angular-material-theming-playground
我是 angular 的新手，想动态更改 angular material 主题，我知道如何制作不同的主题，即制作 scss 文件，定义 3 种颜色，包括 mat 属性和函数，但后来我在 angular.json 中静态添加了该文件引用，但如果我有许多自定义 angular material 主题，我想动态引用 css 文件。
那么有没有简单快速且相当优化的方法来做到这一点？
P.S 我浏览了很多 post 和文档，但在动态更改主题时似乎顺序混乱，例如，如果我有切换，那么如何引用不同的主题样式而不是默认样式？
任何答案将不胜感激..!!
一种解决方案是实时构建 material 调色板。这些是必要的步骤：
- 在 CSS 变量中定义调色板，然后访问它们。
- 将这些变量分配给 material angular 主题。
- 使用“tinycolor”库，我们创建了一个服务来生成 基于颜色的调色板。
- 使用 JavaScript 我们更新 DOM 中的 CSS 变量。
举个例子：
https://stackblitz.com/edit/angular-material-theming-playground