快速上手前端主题切换全攻略

最编程 2024-08-10 11:40:06

...

最近项目涉及换主题/换肤的工作，查了查资料，总结出五种换肤方案：

序号	方法	特点
1	利用class 命名空间	最简单的换肤方案
2	准备多套CSS主题	传统前端最常用
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标签


<body class="red-theme">

    <p> 这里是红色主题 </p>

     ...

</body>

3.如果用蓝色主题，用 blue-theme 代替 red-theme


<body class="blue-theme">

    <p> 这里是蓝色主题 </p>

     ...

</body>

优缺点

优点：简单，好理解，好实现
缺点： CSS中需多写主题的class，代码容易混乱；需手动编写

参考

基于element动态换肤

2.准备多套CSS主题

本地存放多套主题，根据需要切换加载不同的样式

准备份默认样式主题

/*theme-default.css*/
p {
  color: #333
}
...

准备各主题的样式

/* theme-red.css */
p {
  color: #red
}
...

/* theme-blue.css */
p {
  color: #blue
}
...

页面加载后，根据用户需求加载不同的样式列表

   var link = document.createElement('link');
   link.type = 'text/css';
   link.id = "theme-blue";  
   link.rel = 'stylesheet';
   link.href = '/css/theme-blue.css';
   document.getElementsByTagName("head")[0].appendChild(link);

有时候需要保存用户使用的主题，可以通过如下方式：
- 利用路由标记
- 利用cookie标记
- 利用localstorage
- 保存到后端服务器

优缺点

优点：简单，好理解，好实现
缺点：需要手写两份以上CSS配色样式；切换样式需要下载CSS的时间

参考

web网页中主题切换的实现思路中有更多细节

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

这是“准备多套CSS主题”的优化方案，利用CSS预处理生成多套主题样式，再根据需要切换

利用Less，stylus 或 sass 的变量代替颜色值
配置多个主题颜色配置
利用webpack等工具输出多套主题样式
页面加载后，根据用户需求加载不同的样式列表（同方案2）

优缺点

优点：不用手写两套CSS
确定：配置复杂；生成冗余的CSS文件；切换样式需要下载CSS的时间

参考

webpack的配置比较复杂，可以看这篇文章：webpack 换肤功能多主题/配色样式打包解决方案
ant 环境下可以利用antd-theme-generator 快速配置，详见：antd-theme-generator，antd在线换肤定制功能

4.动态换肤

这是element ui中的换肤方案，支持浏览器热换肤。生成一套主题，将主题配色配置写在js中，在浏览器中用js动态修改style标签覆盖原有的CSS。

准备一套默认theme.css样式

/* theme.css */
.title {
  color: #FF0000
}

准备主题色配置

var colors = {
     red: {
       themeColor: '#FF0000'
     },
     blue: {
       themeColor: '#0000FF'
     }
   }

异步获取 theme.css ，将颜色值替换为关键词
关键字可以确保以后能多次换色

var styles = ''
axios.get('theme.css').then((resp=> {
 const colorMap = {
   '#FF0000': 'themeColor'
 }
 styles = resp.data
 Object.keys(colorMap).forEach(key => {
   const value = colorMap[key]
   styles = styles.replace(new RegExp(key, 'ig'), value)
 })
}))

style 变为：

.title {
  color: theme-color
}

把关键词再换回刚刚生成的相应的颜色值，并在页面上添加 style 标签

 // console 中执行 writeNewStyle (styles, colors.blue)  即可变色
 function writeNewStyle (originalStyle, colors) {
      let oldEl = document.getElementById('temp-style')
      let cssText = originalStyle
       // 替换颜色值
      Object.keys(colors).forEach(key => {
        cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
      })
      const style = document.createElement('style')
      style.innerText = cssText
      style.id = 'temp-style'
 
      oldEl ? document.head.replaceChild(style, oldEl) : 
      document.head.appendChild(style)  // 将style写入页面
    }

此时style 变为：

.title {
  color: '#0000FF'
}

优缺点

优点：只需一套CSS文件；换肤不需要延迟等候；可自动适配多种主题色；
缺点：稍难理解；需准确的css颜色值；可能受限于浏览器性能;

参考

本文最后有该方案的完整代码
Vue 换肤实践
elementUI 及 vuetifyjs动态换色实践
vue-element-admin 动态换肤
webpack 插件抽取CSS中的主题色

5. CSS 变量换肤

利用CSS 变量设置颜色，用js动态修改CSS变量，进而换色。
如果不考虑IE兼容，这是最佳换肤方案
看下面的例子，很好理解

<html>
  <head>
    <title>CSS varies</title>
    <style>
      :root {
        --theme-color: red /* css 变量赋值位置 */
      }
      .title {
        color: var(--theme-color) /* 用css变量标记颜色 */
      }
    </style>
  </head>
  <body>
    <h3 class="title">CSS 变量换肤</h3>
    <script>
      // console 中执行 changceColor('blue') 即可变色
      function changeColor(color = 'blue') {
        document.documentElement.style.setProperty("--theme-color",color);
      }
    </script>
  </body>
</html>

优缺点

优点：只需一套CSS文件；换肤不需要延迟等候；对浏览器性能要求低；可自动适配多种主题色；
缺点：不支持IE， 2016年前的chrome，safari; 兼容性参见Can I Use CSS Variables

参考

使用CSS3自定义属性实现换肤功能

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

dynamic.html

<html lang="en">
<head>
  <title>js 动态换肤</title>
   <!-- 利用axios 实现异步加载样式-->
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
 <h3 class="title">js 动态换肤</h3>
 <script>
   // 1. 主题颜色配置
   var colors = {
     red: {
       themeColor: '#FF0000' 
     },
     blue: {
       themeColor: '#0000FF'
     }
   }

   // 2. 异步获取样式
   var styles = ''
   axios.get('theme.css').then((resp=> {
     const colorMap = {
       '#FF0000': 'themeColor'
     }
     styles = resp.data
     Object.keys(colorMap).forEach(key => {
       const value = colorMap[key]
       styles = styles.replace(new RegExp(key, 'ig'), value)
       console.log(styles)
     })
     writeNewStyle (styles, colors.red)
   }))

   // 3.换色
   // console.log 中输入 writeNewStyle (styles, colors.blue)可以换蓝色主题
   // console.log 中输入 writeNewStyle (styles, colors.blue)可以换红色主题
   function writeNewStyle (originalStyle, colors) {
     let oldEl = document.getElementById('temp-style')
     let cssText = originalStyle

     Object.keys(colors).forEach(key => {
       cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
     })
     const style = document.createElement('style')
     style.innerText = cssText
     style.id = 'temp-style'

     oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)
   }
 </script>
</body>
</html>

theme.css

.title {
  color: #FF0000
}

上一篇：用JavaScript掌控CSS样式

下一篇： CSS让元素竖着排，轻松搞定 - 使用writing-mode属性