Open YoRenChen opened 3 years ago
该章节对AntDesign颜色处理进行的源码探索与思考。 构建色系与UI统一性,就需要UI组件和UI颜色体系达到一致的系统 本文在于探讨中台系统中UI颜色结构和自构仿制品,源码处理方式请自行查询。
AntDesign
👉🏻 项目地址
本文探讨方向:
【目录大致流程】
该章节对AntDesign颜色构思 源码探究基于AntDesign-Vue(v1.6x)上进行。 该体系内居于 Less + HSV,函数式处理颜色分类和使用HSV进行明暗度置换。本质上更利于处理颜色关系上的耦合。
AntDesign 定义主色为@primary-color 。用 HSV 模型的值进行递减/递增得到完整渐变色板,构建主色对应的衍生色。 衍生色主要根据以i=6的主色进行换算出10个:
@primary-color
# ant-design-vue/components/style/color/colorPalette.less # 函数 colorPalette # ant-design-vue/components/style/color/default.less @color-5: color(~`colorPalette('@{color-6}', 5, '@{theme}')`);
根据颜色值、色号与主色色号(6)差的绝对值、减淡/加深这三个参数获取渐变后的色值,其中 HSV 的三个值分别经过了渐变调整:
// 获取色相渐变 # ant-design-vue/components/style/color/colorPalette.less # 函数 getHue var hueStep=2; if (hsv.h >=60 && hsv.h <=240) { hue=isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; }else { hue=isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; }
泛色的应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
在3.0版本中,antd-vue使用暗黑风格LESS文件覆盖default.less样式实现。 在antd4.0中对暗黑颜色配套自己的规则,调节色值和HSV中的V百分比。
# ant-design-vue/components/style/themes/dark.less @component-background: #141414; @primary-6: @primary-color; @primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%);
参考:
ant-d-vue: components/style/themes/dark.less
【 项目地址 】
本次构建参考并基于 Ant Design 使用的定义变量与泛色方案。
// 变量定义 # ant-design-vue/components/style/themes/default.less # ant-design-vue/components/style/themes/dark.less // 泛色处理 # ant-design-vue/components/style/color/colorPalette.less // 颜色方法 # ant-design-vue/components/style/color/colorPalette/tinyColor.less
注意:因为上面代码在Less中定义函数,故Less配置中需要加入javascriptEnabled:true来处理函数
【坑点】
├── styles │ ├── color (颜色处理) │ │ ├── colorPalette.less │ │ └── tinyColor.less │ ├── component (组件定义) │ │ ├── button.less │ │ ├── layout.less │ │ └── menu.less │ ├── dark.less (暗系) │ └── default.less (明系)
在定义一个组件的时候,我们可以区分开颜色与其他属性。例如我们定义一个Button时,区分出颜色系的属性,定义颜色组件styles,最终合并到default.less中,而暗系颜色则是在default基础上颜色覆盖。
@unit-prefix: unit; # styles button.less @import '../default.less'; .@{unit-prefix}-btn { color: @text-color; &-switch { background-color: @disabled-color; &-checked { background-color: @color-6; } } } # button.vue <div class="unit-btn"> <button :class="{'unit-btn-switch-checked': checked}" type="button" class="unit-btn-switch" /> </div> # button.less .unit-btn-switch { font-size: 14px; ... }
由于less-loader会在项目里自动处理,那我们需要把这类less合并到public文件夹中,在使用的时候直接创建link进行引用,在颜色切换的时候只需要跟新public的less文件即可实现。
生成less文件存放到public里.js (👈点击查看实现代码)
【注意】 此时我们使用的是在html里引入less,所以我们还需要在html里引入less.js,它的作用是把linkrel="stylesheet/less"的less文件转成css,才能给到元素使用。
rel="stylesheet/less"
颜色变化时候的切换.js (👈点击查看实现代码)
【初步效果】
看到效果真让人兴奋,正让人感到就要功成名就的时候,发现一个问题。 使用less作为一个样色切换有一个好处,可以直接通过less的modifyVars进行颜色切换。不过有个致命缺点,就是解析,网页刚进入的时候,由于less文件解析和css重绘会导致“卡色”。
下图为Perfomance截图: (这说卡炸了不过分吧)
引用less的优缺点明显,那么在看Pro的官网,发现是跟新的是CSS文件。 好家伙,使用CSS能解决解析的步骤。
render
less-plugin-npm-import
等等!实际上在antDesign官网中,最新加载的只有一份样色CSS,而在切换颜色之后,就多加载了一份样式Less和less.js,实现了切换。 “:那么我想应该是一开始打包了Less资源和原始CSS文件,先加载的是CSS,后面切换颜色的时候再塞less文件和less.js” 再试一下... ...
同时打包出明暗风less文件和基础的样式CSS之后的效果:
【网站效果】
再看一下Perfomance:
这样一来初步达成想要的效果 🎉🎉🎉
前端明暗风颜色切换
前言
该章节对
AntDesign
颜色处理进行的源码探索与思考。 构建色系与UI统一性,就需要UI组件和UI颜色体系达到一致的系统 本文在于探讨中台系统中UI颜色结构和自构仿制品,源码处理方式请自行查询。👉🏻 项目地址
本文探讨方向:
AntDesign
颜色处理分析【目录大致流程】
AntDesign 颜色系统
该章节对AntDesign颜色构思 源码探究基于AntDesign-Vue(v1.6x)上进行。 该体系内居于 Less + HSV,函数式处理颜色分类和使用HSV进行明暗度置换。本质上更利于处理颜色关系上的耦合。
主色系构建
AntDesign 定义主色为
@primary-color
。用 HSV 模型的值进行递减/递增得到完整渐变色板,构建主色对应的衍生色。 衍生色主要根据以i=6的主色进行换算出10个:根据颜色值、色号与主色色号(6)差的绝对值、减淡/加深这三个参数获取渐变后的色值,其中 HSV 的三个值分别经过了渐变调整:
泛色的应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
暗黑风格
参考:
ant-d-vue: components/style/themes/dark.less
构建颜色转换
【 项目地址 】
构建步骤:
泛色与暗黑风泛色定义
本次构建参考并基于 Ant Design 使用的定义变量与泛色方案。
注意:因为上面代码在Less中定义函数,故Less配置中需要加入javascriptEnabled:true来处理函数
构建思路
【坑点】
Less文件与组件的构建
styles 文件
组件区分
在定义一个组件的时候,我们可以区分开颜色与其他属性。例如我们定义一个Button时,区分出颜色系的属性,定义颜色组件styles,最终合并到default.less中,而暗系颜色则是在default基础上颜色覆盖。
Less文件放置与引用
由于less-loader会在项目里自动处理,那我们需要把这类less合并到public文件夹中,在使用的时候直接创建link进行引用,在颜色切换的时候只需要跟新public的less文件即可实现。
Less处理
生成less文件存放到public里.js (👈点击查看实现代码)
【注意】 此时我们使用的是在html里引入less,所以我们还需要在html里引入less.js,它的作用是把link
rel="stylesheet/less"
的less文件转成css,才能给到元素使用。颜色变化时候的切换.js (👈点击查看实现代码)
【初步效果】
看到效果真让人兴奋,正让人感到就要功成名就的时候,发现一个问题。 使用less作为一个样色切换有一个好处,可以直接通过less的modifyVars进行颜色切换。不过有个致命缺点,就是解析,网页刚进入的时候,由于less文件解析和css重绘会导致“卡色”。
下图为Perfomance截图: (这说卡炸了不过分吧)
优化
引用less的优缺点明显,那么在看Pro的官网,发现是跟新的是CSS文件。 好家伙,使用CSS能解决解析的步骤。
render
+less-plugin-npm-import
转成 css ,并输出等等!实际上在antDesign官网中,最新加载的只有一份样色CSS,而在切换颜色之后,就多加载了一份样式Less和less.js,实现了切换。 “:那么我想应该是一开始打包了Less资源和原始CSS文件,先加载的是CSS,后面切换颜色的时候再塞less文件和less.js” 再试一下... ...
同时打包出明暗风less文件和基础的样式CSS之后的效果:
【网站效果】
再看一下Perfomance:
这样一来初步达成想要的效果 🎉🎉🎉