前端怎样实现自定义主题样式，当然不是固定的皮肤切换，由用户自定义颜色

Question

如题所示，要实现自定义页面主题色，由用户自定义颜色，而不是固定的几种皮肤，怎样实现？用js修改sass中的变量？怎样可行？

Answer 1

请问现在您解决写个问题了吗，我们也遇到了类似的需求，静态的标签颜色改起来还行，定义一个统一的name使用js修改就行了，但是页面中动态添加class变化样式的标签就不好改了，还要再用js重新修改样式，而且也不代码也很臃肿，有什么好的方法吗？

Answer 2

这个就好像QQ空间一样
前端用户选择背景图或颜色之类的，前端通过js获取值并修改样式，同时通过ajax提交到后台
这样下次用户再次访问时就是修改后的样子

Answer 3

1. 这种主题的改变是永久的所有人都看到的还是个人能够看到的

2. 这种主题的改变的范围是多少？比如，仅仅是通过不同的颜色选择改变部分的颜色（背景、颜色）

如果是个人能够看到的，直接localstorage存储就可以，如果要别人看到的（比如像csdn这种个人博客的定制），就需要进行数据库存储。

你说需要用户自定义，这个就涉及一个问题。

少量的主题选择一般都是系统开发出来的css，到时候根据主题引入，这样的css都是定制好的，比如切换不同的颜色主题，button、nav、bg等等都能很好的转变。

如果是用户自定义的颜色，你是仅仅变bg还是所有的都变，所有的都变又不可能一样，所以这个问题首先就是需要考虑的。

如果仅仅是变其中的一两个 比如我就变个bg或者是nav的颜色，也无所谓的。

还有一种方式是使用浏览器端进行编译，如less.js，sass不清楚。

Answer 4

对不不同的主题样式你可以写成不同的css，保存在指定的位置，当用户切换主题样式的时候，要是需要长久保存，则可以将数据写进数据或者其他存储位置，若不需要保存则不需要进行持久化存储。将改变后的主题名称保存到cookie里面，加载css样式的时候对应主题的名称从Cookie里面获取即可，以上全都是固定皮肤的设置策略，你要是实现动态皮肤，可以借鉴这个策略，将用户修改的样式从存储在数据库里面，用户修改的样式肯定也是基于某个样式的基础上修改的，这样比较节约存储空间和带宽

Answer 5

颜色全从数据库里获取得到值之后用js改变颜色，没改的话有个默认的，用户改变的话，这个颜色传到后端，完成后用js改