1.class命名
简单的来说就是定义很多个class，然后让客户自己去选择一个class去改变整个系统的风格
.red-theme {
color:#fff;
background:red
}
.green-theme{
color:#fff;
background:green;
}
然后动态去给它添加class
document.getElementById('red').onclick = () =>{
document.body.classList.add('red-theme')
}
当然这个不太好用，因为你首先要定义很多个class,而且不能让客户自己想选什么颜色就选什么颜色。
2.利用CSS预处理
利用less或者sass等变量代替颜色值，利用webpack输入不同的样式，页面加载之后，根据客户不同的需求，加载不同的样式。这样也有一些难点，webPack不太好配置。
https://segmentfault.com/a/1190000016061608
3.CSS 变量换肤
利用CSS变量设置颜色，利用JS动态修改变量，使系统颜色变化，如果不考虑兼容性，那这个是最优的解决方案（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，而且页面不会刷新，可自动配置所有的颜色，这种是我最喜欢的，当然也是我使用的，简单易懂！！！
16进制转rgba的方法
var colorRgba = (sHex, alpha = 1) => {
// 十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
/* 16进制颜色转为RGB格式 */
let sColor = sHex.toLowerCase()
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = '#'
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
// 处理六位的颜色值
var sColorChange = []
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
}
// return sColorChange.join(',')
// 或
return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
} else {
return sColor
}
}
4.动态换肤
这种换肤方式是element的实现过程，支持浏览器热换肤，有点难理解，将主题配色写在js中，然后js动态修改style标签覆盖原有的CSS
1.准备一套默认theme.css样式
.title {
color: #FF0000
}
- 准备主题色配置
var colors = {
red: {
themeColor: '#FF0000'
},
blue: {
themeColor: '#0000FF'
}
}
3.异步获取css,将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)
})
}))
这时候这个样式就变成了
.title {
color: themeColor
}
4.把关键词换成生成的颜色，然后写入hear标签里面的style就OK啦
// 此时的样式为
.title {
color: '#0000FF'
}
这个是element的实现过程，还需要再次消化消化！！！下面是全部代码
<html lang="en">
<head>
<meta charset="utf-8"/>
<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('css/theme.css').then((resp=> {
const colorMap = {
'#FF0000': 'themeColor'
}
styles = resp.data
Object.keys(colorMap).forEach(key => {
const value = colorMap[key]
console.log(key)
styles = styles.replace(new RegExp(key, 'ig'), value)
})
console.log(styles)
console.log(colors.red)
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 => {
console.log(key)
cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
})
const style = document.createElement('style')
console.log(cssText)
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
}
网友评论