Customizable/Themable UI

本文关键字：UI Themable Customizable 更新时间：2023-09-26

我想为我的用户提供自定义网站外观和感觉的能力。

我给他们一个颜色选择器来选择一个配色方案。我想动态地生成一些匹配的颜色并应用它们。

我的问题是:

1)。如何根据所选颜色生成配色方案?(一些配色和对比色作为背景)

2)。实现可主题界面的最佳实践是什么?

我正在用纯HTML和REST API作为后端编写AngularJS SPA应用程序。

现在对于我的第二个问题，我正在检索颜色设置并将它们应用于body。

<body style="background:color:{{bgcolor}}; color:{{fgcolor}}">

你可以像上面那样使用ngStyle…但正如你所指出的，它不是很优雅。

简单的事实是，除了ngStyle指令本身，AngularJS本身并没有真正设计来解决这个问题。然而，虽然我还没有确切地看到这方面的"最佳实践"，但您可以从Drupal的"Color"模块(它是它的基础/核心模块之一)中获得一些想法。在Angular中，你可以很容易地做到同样的事情。

它的作用是回到样式表，我假设你跳过了，因为它看起来不像是一个明显的解决方案动态的东西。但他们有一个聪明的答案。在一段代码中，用户选择一种颜色后，他们为其文件名编写一个具有唯一ID的样式表。他们将这些内容放在保存其他用户上传资产的目录中，这样它们就不会与核心站点代码混合在一起(最小化潜在的攻击向量)。然后，他们只需要在页面中添加一个简单的规则来包含样式表本身。

你可以很容易地用Angular模拟这一切，当然，你需要服务器的帮助。但它的好处是它更容易维护。样式表可以完全按照它应该的方式工作，而不是到处"撒"ngStyle指令(一个在你想要样式化的所有地方)，并且可能与你想要在某些元素上做的其他事情发生冲突。你可以制作一个易于维护的模板样式表，所以这是一个很自然的选择……最好的部分是，它很容易将所有内容连接起来。