关于自定义主题颜色前端配色实现

方法之一通过css变量

变量命名以--开头，使用时通过var（）

body{
        --color1:0;
        --color2:191;
        --color3:255;
    }
 .theme-ui p {

　　

　　color：rgb(var(--color1), var(--color2), var(--color3))

　　color：rgba(var(--color1), var(--color2), var(--color3)，.6) }

通过rgba的a值来实现，同一色调下的不同元素颜色深浅差异

 

模板调用写在html文件中方便修改

自定义颜色插件：http://bgrins.github.io/spectrum/