Angular Material 动态定义主题答案

【问题标题】：Angular Material Dynamically define themeAngular Material 动态定义主题
【发布时间】：2019-05-01 13:45:47
【问题描述】：

我正在重写一个 AngularJS 应用程序，其中应用程序的主题由服务器提供。此外，用户可以在应用程序中编辑主题（通过颜色选择器）。

这可以通过来自 Angularjs 材料的 ng.material.IThemingProvider 和 $mdTheming 实现。但在 Angular 中，这些服务不存在。那么问题来了，如何动态创建一个 Angular Material 主题并使用它？

服务器响应

我正在从服务器获取以下数据：

"css": {
    "--nav-font-color-accent": "#fff",
    "--nav-font-color-active": "#fff",
    "--primary": "#4f2d7f",
    "--nav-background": "#fefffe",
    "--nav-font-color": "#47a742",
    "--warn": "#ff5722",
    "--accent": "#00a8b5",
    "--brand-color": "#47a742"
}

然后这些数据通过ng.material.IThemingProvider 转换为 Angularjs-material 主题：

 this.themeProvider.definePalette('primaryPalette', this.generatePalette(config['--primary']));
 this.themeProvider.theme('default')
          .primaryPalette('primaryPalette')

有没有办法可以在 Angular Material 7.1.0 中重现此功能？

【问题讨论】：

我遇到了类似的问题，你能解决这个问题吗？客户有什么方法可以在运行时覆盖默认主题？
@AlejandroGonzález，我能找到的唯一解决方案是实现我自己的主题服务。这是因为 Angular Material 只读取通过 scss 定义的主题。该功能也没有 ETA 来支持动态主题加载。

标签： angularjs angular angular-material themes

【解决方案1】：

在 Angular Material2 中，您可以动态应用主题，但不能动态生成主题，因为主题是使用 SASS 完成的，需要编译才能生成可用的 CSS。

【讨论】：

那么这是否意味着无法动态生成和应用主题？
正如我已经说过的，您可以动态地应用。您不能动态地生成。因此，如果您想动态应用主题更改，则必须预先生成它们。 Angular Material demo site 本身就是这样做的（顶部工具栏右侧的“选择主题”图标）。
嗯，这真是太糟糕了。许多客户在我们当前的应用程序（AngularJS Material）中使用此功能。所以这意味着我们需要找到其他方法。感谢您的回答！