web开发中如何实现皮肤的切换

换肤的实现一般是将颜色和背景相关的样式抽取出来，放到单独的样式表。换肤的时候，切换样式表即可。样式表的切换其实是非常简单的，麻烦的是如何去规划你的样式表，当你把皮肤样式抽取后，整个css样式依然还非常清晰，逻辑合理，这就需要比较深厚的css重构功底。

最简单的皮肤只要换个css就够了，HTML页面框架没变，展现修改

复杂点的是对于HTML模板和CSS的共同替换

这两个方式都很主流

实现都没有什么难度，无非就是你保存一个系统对应的CSS或者HTML模板的路径，请求时输出出来即可

皮肤的切换，前提是你先有几套可选择的皮肤。

皮肤的话，一般指的都是同一个（或多个）HTML 页面，只是 CSS 样式不一样。所以所谓多套皮肤，一般就是多套 CSS 样式。比如：skin1.css/skin2.css/skin3.css 分别表示三套不一样的皮肤。

当用户进行切换时，因为要保持用户此次所选择的皮肤，那么必须要有一个地方去记录下所选择的皮肤（因为下次访问还要记得）。对于是使用 COOKIE 进行记录，还是数据库或者其他存储介质，那自己选择就可以了。

一般像这种用户个性化定制类的信息（当然，前提这种信息是不重要的），如果你认为皮肤的选择并不很重要，那么可以选择记录到 COOKIE 中。就算用户清理了 COOKIE，下次重新选择就好了。当然如果你觉得要永久性记录下本次的皮肤选择，那选择像数据库这种存起来就可以了。

其实提前准备好几套css文件，用Javascript切换link标签的herf属性，引入不同的css文件就行，用COOKIE或者数据库保持该用户的皮肤所使用的css的ID

切换 css 肯定是必须的，这就是根本嘛。。但题主既然提了解决方案，我觉得还是有必要说细点

1.像 discuz、wordpress ，甚至更古老一点的 ecshop，皮肤就是很多个文件夹，一个文件夹一个皮肤，要加入新皮肤，直接在 themes（一般都叫这个名字） 这个文件夹下面再加一个就是。到设置界面，配置皮肤的时候，就会加载一下 themes 下面的所有文件夹，然后选一个，存入数据库，非常传统的搞法。

2.现在有些 webapp 的话，皮肤是 css 样式的一种，选了后，把样式信息写入 COOKIE 或者 localstorge，不过现在这么干的还是很少。。也不推荐。。