<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
/* 自定义变量
例如按钮颜色变量：--color-btn
*/
--color-ul-li: #f5ba63;
}
ul {
/*
使用变量var()的方式实现变量变更
*/
background-color: var(--color-ul-li);
color: #fff000;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li onclick="changeTheme('#256dff')">11111111111</li>
<li onclick="changeTheme('#000000')">22222222222</li>
<li onclick="changeTheme('#e6e6e6')">33333333333</li>
<li onclick="changeTheme('#f5ba63')">44444444444</li>
</ul>
<script>
function changeTheme(value) {
/*
value多套方案规则切换
可以通过setProperty的key不用规则方式实现配置不同套主题，来实现所需效果
let obj = {
red:{
'--color-ul-li':'#256dff',
'--color-btn':'#256dff',
.....
},
green:{
'--color-ul-li':'#000',
'--color-btn':'#256dff',
.....
}
}
*/
document.body.style.setProperty('--color-ul-li', value);
};
</script>
</body>
</html>
