最近项目涉及换主题/换肤的工作， 查了查资料，总结出五种换肤方案：
| 序号 | 方法 | 特点 |
|---|---|---|
| 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，代码容易混乱；需手动编写
参考
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
参考
附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
}
网友评论