企业官网建设流程全解析

tsParticles 单色青绿（Monochromatic Teal）调色板使用指南：安装、配置与源码原理

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

本篇技术指南以 tsParticles 仓库中的@tsparticles/palette-monochrome-teal调色板包为核心，系统讲解该青绿（Teal）单色调色板的色彩构成、CDN / npm 两种安装方式、loadTealPalette加载流程，以及它在引擎内部的解析原理。读完本文，你将掌握如何在任何 tsParticles 项目中一键应用这套青色粒子配色，并理解调色板"只定义颜色、不定义行为"的插件化设计思想。

调色板概述

@tsparticles/palette-monochrome-teal是 tsParticles 生态中palettes/monochromatic系列的一员，位于仓库 palettes/monochromatic/teal 目录。它提供了一套以青绿色（Teal）为基调的单色调色板，专为粒子效果、彩带（confetti）与烟花（fireworks）动画的背景着色而设计。

从源码结构看，该包由四个 TypeScript 源文件构成，职责非常清晰：

• src/options.ts —— 定义调色板的核心数据（背景色、混合模式、颜色列表）；
• src/index.ts —— 导出loadMonochromeTealPalette加载函数；
• src/index.lazy.ts —— 导出loadTealPalette懒加载版本（按需动态import配置，利于减小初始包体积）；
• src/browser.ts —— 浏览器全局变量绑定入口，将加载函数挂载到globalThis上。

提示：文档中同时出现了loadMonochromeTealPalette（ESM 源码命名）与loadTealPalette（懒加载 / 文档示例命名）两个函数，二者功能一致，均用于把调色板注册进引擎，实际使用时按你选择的入口文件调用其中一个即可。

色彩表（来自官方文档）

调色板共包含 6 个前景色、1 个背景色，全部以十六进制形式定义，并附带画布混合模式与填充开关：

这一色彩结构可以直接在 src/options.ts 中得到印证，它对应的 TypeScript 类型定义位于引擎的 engine/src/Core/Interfaces/IPalette.ts。

快速开始清单

官方 README 给出了三步上手流程，这也是所有 tsParticles 调色板包的通用套路：

1. 安装@tsparticles/engine（或直接使用下面的 CDN 打包文件）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在调用tsParticles.load(...)之前先调用loadTealPalette；
3. 在配置项中应用该调色板（palette: "teal"），并配上一份最小化的粒子参数。

需要特别强调的是：调色板只定义颜色，不定义完整行为。粒子数量、形状、大小、运动方式等仍需要你在 options 中自行配置，或配合 preset 预设使用。

安装与引入方式

方式一：CDN / Vanilla JS / jQuery

官方文档推荐的 CDN 写法是在页面中依次引入基础包与调色板包：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-teal@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

需要注意的是，第二个脚本文件名中的coloredSmokeAmber是历史命名遗留；在 package.dist.json 中可以看到其jsdelivr与unpkg字段指向的正是tsparticles.palette-colored-smoke-amber.min.js。加载后loadTealPalette会被挂载到全局对象上（见 src/browser.ts），可直接调用。

方式二：npm / pnpm（模块化项目）

包名在 package.json 中定义为@tsparticles/palette-monochrome-teal，版本与引擎4.3.3对齐。其exports字段同时暴露了标准入口与./lazy懒加载入口，并提供 ESM / CJS / UMD / 浏览器多格式产物：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-monochrome-teal # 或 pnpm pnpm add @tsparticles/engine @tsparticles/basic @tsparticles/palette-monochrome-teal

典型使用示例

脚本加载完成后（或模块import后），即可像官方示例一样初始化引擎：

(async engine => { await loadBasic(engine); await loadTealPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "teal", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段代码背后发生了两件事：

1. loadTealPalette(engine)通过engine.pluginManager.register(...)注册插件加载器，加载器内部调用pluginManager.addPalette("teal", options)把调色板存入引擎的 palettes 映射表（见 src/index.lazy.ts 与 engine/src/Core/Utils/PluginManager.ts）；
2. options 中的palette: "teal"会被引擎在加载配置时解析，自动把调色板的背景色、混合模式与粒子颜色注入实际运行配置。

注意：register必须在tsParticles.load()之前调用，否则引擎会抛出 "Register plugins can only be done before calling tsParticles.load()" 的异常（见 engine/src/Core/Utils/PluginManager.ts）。

自定义与覆盖规则

官方文档明确提示：所有调色板带来的配置都可以像标准 tsParticles 安装一样被逐项覆盖。你可以在 options 中直接书写任何标准配置属性，其优先级高于调色板注入的默认值。例如想改变粒子密度或颜色，只需覆盖particles.number.value、particles.color.value等字段即可。这一设计保证了调色板只是"起点"，而非不可变的约束。

框架组件（React / Vue / Angular 等）

如果项目使用了 tsParticles 的组件库（React、Vue 2.x / 3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等），请查阅对应组件库文档，并在初始化时调用loadTealPalette函数完成注册，其余用法与本指南一致。仓库中 wrappers 目录提供了各框架封装的源码参考。

源码级原理：调色板如何在引擎中生效

IPalette 接口：调色板的唯一契约

引擎在 engine/src/Core/Interfaces/IPalette.ts 中定义了调色板的数据结构：

export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // 画布混合模式 colors: SingleOrMultiple<IPaletteColors>; // 颜色集合（可单组或多组） name: string; // 调色板名称 }

其中IPaletteColors又分为可选的fill（填充色，含enable开关、opacity透明度与value色值）和stroke（描边色，含opacity、width宽度与value色值）。teal 调色板只使用了fill分支，这与 README 中 "Fill: true" 的说明完全对应。

顶层配置解析：Options.#importPalette

当 options 中出现palette字段时，引擎顶层 engine/src/Options/Classes/Options.ts 会调用私有方法#importPalette：通过pluginManager.getPalette(palette)查表，把调色板的background写入background.color，把blendMode写入blend.enable / blend.mode，并把palette名称透传给粒子层继续解析。若查不到对应调色板，则静默跳过（返回而不报错）。

粒子层解析：ParticlesOptions.#importPalette

在粒子层 engine/src/Options/Classes/Particles/ParticlesOptions.ts，引擎会把调色板颜色转换为paint（绘制）配置：将fill.value的色值数组映射为fill.color.value，同时开启blend混合。这里的IPaint结构支持多组颜色变体（SingleOrMultiple），为未来扩展多套配色方案预留了空间。

从这两段实现可以看出，palette: "teal"本质上是一个声明式的颜色注入开关——它自动完成了"背景色 + 混合模式 + 粒子填充色"三件套的装配，而粒子的数量、形状、运动等行为依旧由用户配置决定，这正是 README 反复强调"palette defines colors, not complete behavior"的底层原因。

运行效果参考

下面为该调色板的官方示例截图（1920×1080），可直观感受深墨绿背景上青色粒子的渲染效果：

相关资源导航

• 调色板与预设总目录：本仓库 palettes 目录下包含monochromatic、atmosphere、fireworks、confetti等 19 套调色板，结构完全一致，可对照阅读；
• 引擎源码：调色板依赖的插件管理器与配置解析逻辑集中在 engine/src/Core/Utils/PluginManager.ts 与 engine/src/Options/Classes 目录；
• 变更记录：包级更新历史见 palettes/monochromatic/teal/CHANGELOG.md；
• 官方主文档：https://particles.js.org/docs/ 提供了完整的配置参考与框架接入说明。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles