颜色

该组件库规定了一套调色板

WARNING

组件库暂未实现暗黑模式颜色风格，后续版本将更新优化

装饰色

我们规定了六套装饰色系（分别为：purple、red、pink、yellow、blue、green），适应不同场景的不同需求
你也可以重新定义覆盖这些css变量，个性化你自己的调色盘。需要注意的是：color5一般为一个透明度较高的颜色，其它颜色则为实色

--vi-purple-color1--vi-purple-color2--vi-purple-color3--vi-purple-color4--vi-purple-color5

--vi-red-color1--vi-red-color2--vi-red-color3--vi-red-color4--vi-red-color5

--vi-pink-color1--vi-pink-color2--vi-pink-color3--vi-pink-color4--vi-pink-color5

--vi-yellow-color1--vi-yellow-color2--vi-yellow-color3--vi-yellow-color4--vi-yellow-color5

--vi-blue-color1--vi-blue-color2--vi-blue-color3--vi-blue-color4--vi-blue-color5

--vi-green-color1--vi-green-color2--vi-green-color3--vi-green-color4--vi-green-color5

其中，紫色是我们默认的组件库主色系，如果您需要更改主色系，只需要修改以下css变量即可：

--vi-main-color1--vi-main-color2--vi-main-color3--vi-main-color4--vi-main-color5--vi-main-color6

中性色

除装饰色外，我们规定了一套中性色用于文本、边框等部分

--vi-font-color--vi-link-color--vi-icon-color--vi-background-color-deepest--vi-background-color-deeper--vi-background-color-deep--vi-background-color

--vi-dark-color1--vi-dark-color2--vi-dark-color3--vi-dark-color4

--vi-golden-color1--vi-golden-color2

使用

如果需要使用上方这些颜色，只需要引用对应的css变量即可
你也可以在自定义覆盖这些变量，完成你的个性化订制，全局更改建议在:root里定义，仅对一个组件色系更改，可以在类名vi-组件名中更改