我想让我的用户能够自定义网站的外观。
我给他们一个颜色选择器来选择颜色方案。我想动态生成一些匹配的颜色并应用它们。
我的问题是：
1.) 如何根据所选颜色生成配色方案？ （一些匹配的颜色和背景对比色）
2.) 实现主题界面的最佳实践是什么？
我正在编写一个带有纯 HTML 的 AngularJS SPA 应用程序，并以 REST API 作为后端。
现在对于我的第二个问题，我正在检索颜色设置并将它们应用于正文。
<body style="background:color:{{bgcolor}}; color:{{fgcolor}}">
我正在寻找更优雅的东西。
【问题讨论】：
标签： javascript html css angularjs customization
您可以像上面那样使用 ngStyle 执行此操作...但正如您所指出的，它不是很优雅。
简单的事实是，除了 ngStyle 指令本身之外，AngularJS 本身没有任何东西真正旨在解决这个问题。然而，虽然我还没有完全看到这方面的“最佳实践”，但您可能会从 Drupal 的“颜色”模块中获得一些想法，这是它的基本/核心模块之一。你可以很容易地在 Angular 中做同样的事情。
这样做是回到样式表，我假设您跳过了它，因为它似乎不是动态事物的明显解决方案。但他们有一个聪明的答案。在一段代码中，用户选择一种颜色后，他们会写出一个样式表，其文件名具有唯一的 ID。他们将它们放在保存其他用户上传资产的目录中，因此它们不会与核心站点代码混合（最大限度地减少潜在的攻击向量）。然后他们只需要在页面中包含一个简单的规则来包含样式表本身。
您可以使用 Angular 轻松模拟所有这些，当然，您需要服务器的帮助。但它的好处是它更容易维护。不必在所有地方“散布” ngStyle 指令（一个在您想要样式化的所有内容上）并且可能与您想要在其中一些元素上执行的其他事情发生冲突，样式表可以完全按照它应该的方式工作：使用类以针对特定元素。您可以制作一个易于维护的模板样式表，这样自然而然地适合...而且最好的部分是，它很容易将所有内容连接起来。
【讨论】：