简介
Technicolor 是一款帮助前端开发者为项目添加主题功能的 npm 包，它支持多种颜色方案，并可以自定义颜色。使用 Technicolor 可以大大提升项目的可定制性和美观性。
安装 Technicolor
在命令行中使用以下命令安装 Technicolor：
npm install technicolor --save-dev
安装完成后，在项目中引入 Technicolor：
import Technicolor from 'technicolor';
使用 Technicolor
API 概览
Technicolor 暴露了以下 API：
initColor：初始化 Technicolor，可以配置默认颜色和支持的颜色方案。setColor：将颜色应用到指定的选择器上，支持混合颜色。removeColor：将颜色从指定的选择器上移除。
初始化 Technicolor
在使用 Technicolor 前，我们需要先初始化它。在 Vue 项目中，我们可以将以下代码放在 App.vue 的 created() 钩子中，或者放在任何一个组件的 mounted() 钩子中。
Technicolor.initColor({
defaultColor: '#1890ff',
colorSchemes: {
blue: ['#1890ff', '#40a9ff', '#69c0ff', '#91d5ff'],
red: ['#ff4d4f', '#ff7a45', '#ffa940', '#ffc53d']
}
});其中，defaultColor 是默认颜色，如果没有指定颜色方案或者选择器没有匹配任何颜色方案，将使用默认颜色。colorSchemes 是支持的颜色方案。
应用颜色
在需要应用颜色的地方调用 setColor，传入一个选择器和颜色方案名称即可。例如：
Technicolor.setColor('.button', 'blue');除了颜色方案名称外，setColor 还支持传入 hex、rgba、hsla 等格式的颜色值。
如果需要将多个颜色混合使用，可以将多个颜色方案名称用空格拼接起来，例如：
Technicolor.setColor('.header', 'blue red');移除颜色
如果需要移除某个选择器应用的颜色，可以调用 removeColor：
Technicolor.removeColor('.button');示例
以下是一个简单的 Vue 示例：
-- -------------------- ---- -------
----------
-----
--- -------------------------- -------
------- ----------------------------
------- ------------- --------------------
------- ------------- --------------------
------- ------------- -------------------
------- ------------- -------------------
------
-----------
--------
------ ----------- ---- --------------
------ ------- -
--------- -
-----------------------
------------- ----------
------------- -
----- ----------- ---------- ---------- -----------
---- ----------- ---------- ---------- ----------
-
---
------------------------------- --------
-
--
---------
-------
------- -
-------- -------------
-------- --- -----
-------------- ----
------- -----
------ -----
----------- --------
------- --------
---------- -----
-
----- -
------ -----
----------- --------
-
---- -
------ -----
----------- --------
-
--------在以上示例中，我们初始化了一个默认颜色为 #f5222d，支持的颜色方案包括蓝色和红色。在页面中，我们为 5 个按钮应用了蓝色方案，并为其中的两个按钮应用了不同的蓝色方案。最后，我们为所有按钮设置了样式。启动项目，可以看到所有按钮都变成了蓝色，而其中两个按钮的蓝色颜色和其他三个按钮不同。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77757