如何使用 CSS 制作可主题化的 Web 应用程序？答案

【问题标题】：How to make a themeable web application using CSS?如何使用 CSS 制作可主题化的 Web 应用程序？
【发布时间】：2012-02-22 04:34:08
【问题描述】：

我有一个 Web 应用程序的想法，它允许用户创建自己的个人资料页面，并应用自定义或预定义的主题来更改他们的个人资料页面的外观/感觉。它类似于 Wordpress 主题或任何其他使用类似想法的产品。我的想法是使用less 构建css。用户将能够通过 GUI 界面创建/编辑自己的主题（选择颜色、字体等）。保存主题时，它会更新 .less 文件中的变量，并相应地重建 css。

这是一种将样式主题应用于页面的可行甚至可能的方式吗？是否有任何现有的解决方案已经实现了这一点？

【问题讨论】：

还发现使用DotLess 之类的工具可以让您交付从LESS 文件on the fly 生成的CSS。

标签： css themes less

【解决方案1】：

我在这里看到的一个问题是用户可以更改页面中不应更改的其他部分。例如菜单、登录按钮等。这可能是一个安全问题。因此，您必须限制用户更改样式的方式。例如只允许使用某些参数更改某些类。

【讨论】：

对，我打算为每个用户页面使用单独的 css 文件，并使用 GUI 来限制他们可以更改的变量。

【解决方案2】：

您可以查看jQueryUI themeroller，这是一种让用户更改个人资料样式同时主要将样式限制为颜色和布局的方法。有 jQuery 插件可以让他们从下拉列表中选择一个主题。

一个更自定义的方法可能是在整个模板中设置内联样式，用 php 将它们包装起来，然后在你的 GUI 中工作。因此用户选择导航栏的颜色，并将十六进制或RGB颜色存储到db表中。

【讨论】：

很好的输入，我没有考虑过使用 themeroller - 将用户选择存储在数据库表中并相应地呈现页面符合我的想法。