从组件库中学习颜色主题配置

前言

对于一般前端来说，在颜色选择配置上可能没有设计师那么专业，特别在某些项目中的一些场景颜色配置上可能都是用相近的颜色或者透明度来匹配，没有一个专门的颜色对比输出。

所以本文想给大家讲一下主题色的配置应用，其中antd组件库给我们提供了十二种自然主题色板，在美感和视觉上感觉非常的舒适自然，可以参考来使用。

我们以antd组件库的色彩体系中的火山主题为例来讲解下面的内容。（本文会涉及到 sass 的语法）

其中提供的主题色每一种都有从浅至深有 10 个颜色，一般以第 6 种为主题的主色，其中的一些场景也给出了我们对应的颜色级别。

以图为例，告诉我们常用的场景对应的颜色深浅级别

• 
  
• selected 选中：颜色值为 1
  
• hover 悬浮：颜色值为 5
  
• click 点击：颜色值为 7
  

主题色场景

以上述场景为例我们来实践一下，先列出10种颜色，然后写入在 css 变量中

$color-valcano: (

  'valcano-1': #fff2e8,

  'valcano-2': #ffd8bf,

  'valcano-3': #ffbb96,

  'valcano-4': #ff9c6e,

  'valcano-5': #ff7a45,

  'valcano-6': #fa541c,

  'valcano-7': #d4380d,

  'valcano-8': #ad2102,

  'valcano-9': #871400,

  'valcano-10': #610b00

);


:root{

  @each $attribute, $value in $color-valcano {

    #{'--color-#{$attribute}'}: $value

  }

}

对于以上的场景，我们只需要应用对应的 css 变量即可

最终的变量如下

:root {
--color-valcano-1: #fff2e8;
--color-valcano-2: #ffd8bf;
--color-valcano-3: #ffbb96;
--color-valcano-4: #ff9c6e;
--color-valcano-5: #ff7a45;
--color-valcano-6: #fa541c;
--color-valcano-7: #d4380d;
--color-valcano-8: #ad2102;
--color-valcano-9: #871400;
--color-valcano-10: #610b00;

}

示例如下

通过变量后缀带数字这种非常难记住对应的场景值，不利于开发，我们可以再优化一下，把对应的场景细化出来，存储对应的颜色级别。

$scence-color-level: (
'primary': 6,
'selected': 1,
'hover': 5,
'border': 5,
'click': 7

);

:root{
@each $attribute, $value in $scence-color-level {

    #{'--color-#{$attribute}'}: map-get($color-valcano, #{'valcano-#{$value}'})

  }

}

我们来看看转换之后的变量

:root {
--color-primary: #fa541c;
--color-selected: #fff2e8;
--color-hover: #ff7a45;
--color-border: #ff7a45;
--color-click: #d4380d;

}

这样遇到对应的变量我们就可以不用关心颜色的深浅级别，只需要找对应场景，例如 selected 场景只需要使用变量 var(--color-selected) 就可以了。

当我们想切换其他主题的时候，难道要全部重写一遍，手动变更吗？

我们再来优化一下，将主题的变量变成动态的

$theme: 'valcano';

$theme-color: (
'valcano': $color-valcano,
'lime': $color-lime,
'cyan': $color-cyan,
'purple': $color-purple

);
:root{
@each $attribute, $value in $scence-color-level {

    #{'--color-#{$attribute}'}: map-get(map-get($theme-color,$theme), #{'#{$theme}-#{$value}'})

  }

}

以代码为例 引入了四种主题valcano lime cyan purple，若要切换主题，只需要更改变量$theme即可

可以在代码片段中的 style 中手动更改$theme变量值，然后运行查看效果

element组件库主题切换

了解完原理并实践之后，我们来看看 element组件库 的切换主题的原理是怎样的？

这是element的主题变量

$colors: () !default;
$colors: map.deep-merge(

  (
'white': #ffffff,
'black': #000000,
'primary': (
'base': #409eff,

    ),
'success': (
'base': #67c23a,

    ),
'warning': (
'base': #e6a23c,

    ),
'danger': (
'base': #f56c6c,

    ),
'error': (
'base': #f56c6c,

    ),
'info': (
'base': #909399,

    ),

  ),

  $colors

);

官网提供的覆盖方法

// styles/element/index.scss /* 只需要重写你需要的即可 */ 

@forward 'element-plus/theme-chalk/src/common/var.scss' with ( 
$colors: ( 'primary': ( 'base': green, ), ), 

); 
// 如果只是按需导入，则可以忽略以下内容。 
// 如果你想导入所有样式: 
// @use "element-plus/theme-chalk/src/index.scss" as *;

官网定义的主题变量是通过 map.deep-merge 来实现主题映射合并。

map.deep-merge的作用是：用于深度合并两个或多个映射（maps）。它可以在不丢失嵌套映射的情况下合并映射，这对于处理复杂的配置数据结构非常有用。

所以其实就是通过新的配置去合并覆盖它，有点类似 Object.assign() 这种变量对象覆盖的感觉。

其中element组件库也是通过sass函数自动生成需要用到的 css 变量来重构整一个样式系统。

为什么最后都转变成css变量？

• 
  
• 兼容性：因为CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。
  
• 动态性：每个组件都是有对应的css变量，想要改变颜色，只需要动态地改变组件内的个别变量即可。
  
• 多样性：也可以通过js来控制css变量