目标

1.设计改变一下主题色,全套页面和组件皆变色
2.定义尽量统一一套颜色变量表 后期改色直接把表给改了
3.由于有些颜色经常用语义化之后就很好使用了,比如border色

颜色语义化变量化

为什么要把颜色语义化,变量化？
实现复用和一处修改处处改变
写过程序的人都知道变量是程序最伟大之处,而颜色无非就是个色值。而一个app颜色上的变化无非就是所有组件上的色值变化。当我们把颜色语义变量化后,第一利于使用,我们更容易感知一个颜色的用处。第二所有用到同一变量的组件都可以共用这个统一的色值。后期我们无非就是改变一个主题色,当然我们也可开放更多的组件色变量。这里当然不能继续手写css，我们将使用sass来编写我们的css，因为没有sass的加持我们该方案将寸步难行。

难点:需要所有用到颜色的地方都带入这个色值变量，这是比较头疼的问题特别是第三方库，明显可以看到上图还是有些组件没有适配到，所以这里强烈推荐使用可以改变主题色的第三方UI库，而自己写的页面基本上可以变化

这里前端实现的方案是选用可以定制主题色的第三方库,自己写的页面全部用变量来写色。

主题色

$generalColor {
 theme: '#2d8cf0'}

辅助色

辅助色是具有代表性的颜色,常用于信息提示,比如成功,警告和失败。这是一套基本不变的色系。

$generalColor: (
  info: '#2d8cf0',
  success: '#19be6b',  warning: '#ff9900',  error: '#ed3f14');

中性色

又一个一旦定义好终身使用的色系
包括背景,边框,分割线,主标，副标,表格头,中性色在落地时是按造透明度的方式实现的,另外为了适应深色背景和浅色背景顾设置两套中性色。

$generalColor: (  title: opacity(#000,85%),  primary_text: opacity(#000,65%),  secondary_text: opacity(#000,45%),  disable: opacity(#000,25%),  border: opacity(#000,15%),  divider: opacity(#000,9%),
  background : opacity(#000,4%),
  table_header : opacity(#000,2%)，  title_dark: opacity(#fff,100%),  primary_text_dark: opacity(#fff,85%),  secondary_text_dark: opacity(#fff,65%),  disable_dark: opacity(#fff,45%),  border_dark: opacity(#fff,25%),  divider_dark: opacity(#fff,15%),
  background_dark : opacity(#fff,9%),
  tableHeader_dark : opacity(#fff,4%));

变化标准化

可以量化的还有颜色的变化反馈
比如点击色，经过色[一般为原色加深百分比]
例如 按钮点击态 前端实现如下 大致意思既是主题色加深10%

.btn_active{    color:darken(map-get($generalColor,theme),10%)
}

使用sass循环输出自己想用class

//定制一套颜色class//语义抽象话$generalColr: (        primary:#2d8cf0,        lightPrimary:#5cadff,
        darkPrimary :#2b85e4,        info:#2d8cf0,        success:#19be6b,        warning:#ff9900,        error:#ed3f14,
        danger : #ed3f14,        title:#1c2438,        content:#19be6b,        subColor:#80848f,        disabled:#bbbec4,        border:#dddee1,        divider:#e9eaec,        background:#f8f8f9,
        white : #fff,
        black : #000,
        yellow : yellow,
        th : #eef1f6);@each $key, $color in $generalColr {
  .f_c_#{$key} {    color: $color!important;
  }
  .bg_c_#{$key} {    background: $color!important;
  }}

如此这般你可以快速使用这些class

 <div class="f_c_title bg_c_theme">主题色按钮,title色字体</div>

 <div class="f_c_disable bg_c_error">成功色按钮,error色字体</div>

总结

有了上面这套变量,以后给组件定义颜色就是信手拈来之事
例如以下的标签:

@import 'scss/_var.scss'.btn-label{    color:map-get($generalColor,error)；
}

@import 'scss/_var.scss'.btn-label{    color:map-get($generalColor,warning)；
}

在之后设计或者产品经理对颜色不满意了,修改也将是分分钟的事!
只需修改_var.scss 该变量文件,全局既会生效!