创建自定义角度材质主题时最好的方法是啥？

Posted 2023-03-06

【中文标题】创建自定义角度材质主题时最好的方法是啥？

【英文标题】：What is the best approach when creating a custom angular material theme?创建自定义角度材质主题时最好的方法是什么？

【发布时间】：2017-06-27 15:38:43

【问题描述】：

我正在尝试了解如何最好地使用 Angular 材质主题：

Google 提供了广泛的color palettes， 并且还提供了如何easily switch between palettes的指南。

我看到了这个question，并找到了一堆工具来围绕主要颜色生成调色板（tool1，tool2）

虽然从设计师那里获得定制设计时，选择了不同的颜色，但我发现很难将设计颜色实现为一个完整的主题，因为要考虑的变量太多（例如悬停阴影、墨水波纹阴影等）。

我的问题是：

作为开发人员，我能否从 交付给我的每个设计（通过 JS 主题化或 CSS 覆盖），还是需要考虑任何限制？

设计者是否应该考虑一些指导方针？ 创建设计？

我们是否应该放弃设计的灵活性，采用以下方法之一 Google 的预定义调色板？

**

编辑 - 05/2017：

我决定完全关闭主题，因为我无法完全理解如何根据我们的需要自定义它。

我现在通过 webpack 将变量注入到 SASS 文件中，并且输出代码更加健全。

**

【问题讨论】：

我刚刚找到了一个 Angular Material 的最佳示例来开始我的新应用程序，我发现了这个：fuse-angular-material.withinpixels.com/dashboard-project。之后，我在使用这个主题后从头开始开发了一个新的应用程序。

【参考方案1】：

不，目前没有。 “令人愉悦”是一个广义的、基于意见的术语，不是由逻辑算法决定的。实际上，在我终于了解了足够多的 UI 设计知识并知道它行不通之前，我实际上已经尝试这样做了几个月。

Google 的材料设计指南是设计师创建材料主题所需的全部内容。时间不长，一般设计师一个小时左右就能看完。

没有。 Google 的预定义调色板旨在供程序员使用，以快速创建具有可接受界面的站点。除非您专门为 Google 工作，否则没有理由限制设计师的调色板。不过，它们完全可以作为指导方针。请参阅Dark Material UI，这是一个基于 Material Design 的设计概念，但不遵守许多指南（例如，它使用 Google 调色板中未包含的颜色）

【讨论】：

感谢您的回答，能否告诉我您是通过 $mdThemingProvider 还是 SASS 变量自定义主题？

当我想创建一个全新的主题（因为它需要相当长的时间）时，我主要使用 SASS，当我只想扩展主题并更改某些部分时，我使用 $mdThemingProvider。

【参考方案2】：

我们使用的方法只是在您的html head 部分中更改css 文件的href。在这种情况下，每个主题都有独立的 css 文件，当需要切换时，只需修改 href。

不需要像谷歌推荐的那样使用额外的标记，因为在主题之间切换会很复杂，特别是如果有很多主题。

您可以在此处查看示例： http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client

有一个活生生的例子。以及材料主题。

【讨论】：

我看不出这如何回答我的问题？