用户可配置的CSS颜色

Question

我作为软件开发人员工作了两个多月。我被聘为一家管理大公司手机计划的公司。我主要处理两个协同工作的Web应用程序，即前端＆＃34;用户可以登录和订购新设备，升级设备，挂起设备等等。 ＆＃34;后端＆＃34;主管可以登录并更改前端的各个方面（即用户，手机捆绑）。

我的任务是为后端的用户提供在前端配置主要ui元素颜色的功能，这样就可以使用户的门户网站与公司的颜色。

我一直在使用样式表来确定各种元素的颜色设置位置，但我不确定如何在每个用户的基础上实现对样式表的更改。任何想法或建议都表示赞赏。

Answer 1

有几种不同的方法可以做到这一点。

可能最简单的方法是使用Javascript。当用户选择颜色方案时，您将其记录下来并将其发送到客户端Javascript（可能通过AJAX请求），然后Javascript会自动通过内联style="..."标记直接应用样式，或者直接应用类绑定到样式表 - 它加载了所有可能的颜色方案，这是这个解决方案稍微下降的地方。

要么是内联所有自定义样式，这是不好的做法，要么样式表方式比它应该更大。从它的声音来看，它们并不是简单地想要“主题”，它们相对容易，它们实际上想从颜色选择器中选择颜色来主题化。

您还可以使用SASS动态生成样式表。有一个SASS变量表（这是动态生成的部分），如下所示：

$color_table_header: [...];
$color_table_footer: [...];

$color_header_basic: [...];

...

并通过某种轻量级的Node.js服务器动态填充这些颜色。这需要更多的存储空间（因为您需要为每个用户生成一个需要自定义颜色的样式表）。话虽这么说，为自定义用户主题生成的样式表只需要覆盖现有的主样式表，而不是为每个主题生成一个完整的页面样式表。

然后它非常简单：检查用户是否具有自定义样式，并通过修改页面视图来提供除常规样式表之外的样式表。