前言
在前端开发中，颜色是一个非常重要的东西，我们使用颜色来搭建网页的整体风格，给用户传达信息。颜色名称作为一个标识符，为我们在编码时提供了很大的便利。利用 npm 包 css-color-list，我们可以快速的获得 HTML 中定义的颜色名称列表。
在本文中，我们将会介绍如何使用 css-color-list 这个 npm 包，同时示范如何将其与 Webpack 结合使用，实现自定义主题功能。
安装
安装 css-color-list 很简单，只需要在你的项目目录下运行：
npm install css-color-list
使用
在引入 css-color-list 之前，项目需要安装依赖包color-string，否则在使用时会报错。
npm install color-string
引入 css-color-list：
import { colorList } from 'css-color-list';可以在 Chrome console 上验证其结果。
console.log(colorList);
示例
我们可以用 css-color-list 返回的颜色名称列表来构建自定义的主题列表。在前端开发中，用户可以根据自己的喜好，选择喜欢的颜色主题。当用户点击了某一个主题，我们可以通过相应的 class 名称，对网页元素进行颜色的切换。
切换颜色主题的实现，需要依赖一些工具，如 jQuery 或 Webpack，并涉及到一些样式文件的编写，以下是一个基于 Webpack 的实现示例：
- 在 HTML 中定义一个颜色切换的按钮和一个元素，用来测试颜色切换的效果。
<body> <a class="theme-switcher" href="#">switch theme</a> <div class="showing-color"></div> </body>
- 引入自己定义的 CSS 文件
import './style.css';
- 在 style.css 文件中，定义两个不同的主题样式。.dark-bg 表示深色主题，.light-bg 表示浅色主题。
.dark-bg {
background-color: #2e2c32;
color: white;
}
.light-bg {
background-color: #e3eaee;
color: black;
}- 在 JavaScript 中，通过给按钮添加点击事件的监听，来实现颜色主题的切换。
-- -------------------- ---- -------
------ - ---- ---------
------ - --------- - ---- -----------------
------ ----------- ---- ---------------
-------- ---------- -
-------------------------------- ---------- -
--- ------- - --------------------------------------------
--- ----- - ------------------------------------------------
--- --------- - ------ - -- - -----------------
--- --------- - ---------------------
--------------------------------------------------------- -----------------------
---
-
---------------------------- -
-----------
---在上面的代码中，我们通过 jQuery 给按钮添加了点击事件监听。在函数里面，通过先获取当前的背景颜色，使用 color-string npm 包将其转换为名称，再利用 css-color-list 找到该颜色在列表中的索引，接着加一即为下一个颜色在索引中的位置，我们找到这个索引位置对应的颜色名称，并将它作为 class 名称添加到 .showing-color 元素上。
完整的示例代码，可以在 GitHub 上下载。这个示例只是让你对这个 npm 包的使用方式有个基本的了解，更重要的是，你可以通过学习这个实现方式，了解到如何利用 npm 包搭建出一个可以让用户自由选择颜色主题的网页应用。
##总结
在本文中，我们介绍了 npm 包 css-color-list 的使用方法，并通过示例代码，展示了如何将其与 Webpack 结合起来，实现颜色主题切换的功能。希望这篇文章对你在前端开发中的学习和使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f76e9ba7116197505561aaa