介绍
themer-m4 是一个可以自动生产配色方案的 npm 包。这个包的思想是基于 M4 的宏处理器，能够根据不同的配置文件自动生成配色电路板，并使其与主题颜色相匹配。使用 themer-m4 不需要有深厚的编程经验，其核心思想是根据规定的颜色变量来生成配色方案。 他可以应用于 web 应用开发中的视觉设计中，方便前端开发人员快速实现页面设计并改变主题颜色。
安装
使用 npm 安装
npm i -g themer-m4
这样你就能够在你的项目中使用 themer-m4 自动生成配色方案了。
使用
初始化配置文件
在控制台中输入以下命令初始化配置文件。
themer-m4 init
执行完该命令，themer-m4 生成了一个名为 config.m4 的文件. （指要自动生成的颜色存放位置和对应的变量名)
COLOR_BG:#ffffff COLOR_BODY:#f4f4f4 COLOR_PRIMARY:#3f51b5 COLOR_TEXT:#333333 COLOR_ACCENT:#ff4081
配置
通过修改 config.m4 文件中的变量，可以更改 generated 配色方案：
main:#1f1b1b secondary:#c2c2c2 danger:#e74c3c text:#f9f9f9 info:#1abc9c
你也可以在 config.m4 文件中创建多个根据场景自动生成的配色配置文件。
自动生成配色电路板
运行以下命令，自动生成配置文件内的配色方案:
themer-m4 build
执行完该命令，生成 name.theme.css 文件，你可以在你的项目中引入他（请传入文件路径）, 即可实现主题切换。
示例 CSS 代码：
body{
background-color: COLOR_BG;
color: COLOR_TEXT;
}
.button{
background-color: COLOR_PRIMARY;
color: COLOR_TEXT;
}自定义生成文件的名字
如果你不想使用默认名称 name.theme.css，那么可以在配置文件中指定生成文件的名称：
$generated_file=theme.css
高级用法
你可以通过以下方式自定义 m4 宏：
define(`COLOR_BUTTON`, `COLOR_PRIMARY`)
.warning{
color: COLOR_TEXT;
background-color: COLOR_BUTTON;
}示例 CSS 代码：
.warning {
color: COLOR_TEXT;
background-color: COLOR_PRIMARY;
}总结
themer-m4 是一个十分实用的 npm 包，能够根据规定的颜色变量自动生成配色方案。我们可以在项目中使用它，方便前端开发人员快速实现页面设计并改变主题颜色。它的理念简单易懂，易于上手，但是功能强大，能够应对多种复杂场景的需求。希望学习本文之后，大家可以用好这个强大的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b46