js 颜色动态处理

                        
开发中有些场景可能需要更换整个系统的皮肤颜色，主色调还会配备几种辅色，
这个时候最方便的做法就是根据主色来动态调配辅色

这里使用了：color.js 库

HTML:
<style>
     // 定义颜色变量
     :root {
          --skin-color: #1a8099;
          --skin-color-hover: #337ab7;
          --skin-color-active: #275f91;
     }
     // 变量使用方式
     .btn {
          background-color: var(--skin-color);
     }
</style>
<script src="color.js"></script>

JS:
// 设置主色
document.querySelector(':root').style.setProperty("--skin-color", data.mainColor);
// 动态调配辅色
var Color = net.brehaut.Color;
var skinColor = Color(data.mainColor);
// 变亮
document.querySelector(':root').style.setProperty("--skin-color-hover", skinColor.lightenByRatio(0.2).toCSS());
// 变暗
document.querySelector(':root').style.setProperty("--skin-color-active", skinColor.darkenByRatio(0.2).toCSS());