前端换肤方案

主题换肤  cookie中存储theme值

目录

        1. 利用class 命名空间

        优缺点

        参考

        2.准备多套CSS主题

        优缺点

        参考        

3. 利用CSS预处理生成多套主题样式

        优缺点

        参考

4.动态换肤

        优缺点

        参考

         5. CSS 变量换肤

优缺点

        参考

        附A： 方案四 态换换肤完整代码

---

序号	方法	特点
1	利用class 命名空间	最简单的换肤方案，适用局部小范围的主题换肤
2	准备多套CSS主题	传统前端最常用。 根据层叠性特性，使原有样式生效两种办法 1.预制样式  link 控制值disable 2.动态追加  link标签  覆盖
3	利用CSS预处理生成多套主题样式	现代前端最常用
4	动态换肤	支持浏览器热换肤，最酷炫
5	CSS变量换肤	不考虑IE，最佳换肤方式

这是五种均为通用方案，可以适用于各种前端框架，脚手架中

1. 利用class 命名空间

这是最简单的换肤方式， 看下面示例即可轻松理解。

1.利用class 名称准备两个主题：

<style>

  p.red-theme {

    color: red

  ｝

  p.blue-theme {

    color: blue

  ｝
</style>

2.如果用红色主题， 给body增加 red-theme标签