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