tsParticles Greens 调色板（Monochromatic Greens）使用指南与源码解析

tsParticles Greens 调色板（Monochromatic Greens）使用指南与源码解析

【免费下载链接】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 Greens 是 tsParticles 提供的单色绿色调色板（Monochrome Greens Palette），它通过palette: "greens"一行配置，就能为粒子效果注入一套从深绿到浅绿的协调配色，配合screen混合模式营造出类似彩色烟雾的发光效果。本文基于仓库中 greens/README.md 文档，结合引擎的 Palette 插件机制与源码实现，讲解它的安装方式、使用步骤、配置细节与底层工作原理。

Palette 是什么：为什么需要它

在 tsParticles 中，Palette（调色板）只定义颜色，不定义粒子的完整行为。它是一组预设的配色方案，包含背景色、混合模式（blend mode）以及粒子填充/描边颜色集合，正如文档 Quick checklist 中所强调的：A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

因此使用调色板通常需要三步：

1. 安装@tsparticles/engine（或直接使用 CDN 包）；
2. 加载一个运行时基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadGreensPalette；
3. 在选项中应用调色板名称（palette: "greens"），并配合一份最简粒子配置。

调色板与"预设（Preset）"不同：预设（如presets/fireworks等）提供的是整套可直接运行的配置，而调色板只负责色彩体系，粒子数量、形状、尺寸、运动等仍需你自行配置。这与引擎中Options.#importPalette与ParticlesOptions.#importPalette的实现完全一致（见下文源码解析）。

安装与加载

npm 方式

Greens 调色板以独立 npm 包发布：@tsparticles/palette-monochrome-greens（见 palettes/monochromatic/greens/package.json 中的name字段，当前仓库版本为 4.3.3）。包内同时提供 ESM / CJS / UMD / Browser 多模块格式与类型声明。

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-monochrome-greens

在模块化项目中导入并注册：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadGreensPalette } from "@tsparticles/palette-monochrome-greens"; await loadBasic(tsParticles); await loadGreensPalette(tsParticles);

从 index.lazy.ts 可以看到，loadGreensPalette的 lazy 入口在注册时才动态import("./options.js")加载调色板数据，适合按需加载场景；index.ts 则是同步加载的非 lazy 入口（内部注册名为monochrome-greens）。

CDN / Vanilla JS / jQuery 方式

原文档给出的 CDN 方式（注意第二个脚本是含调色板数据的 bundle 文件）：

<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-greens@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

快速上手：最小可用示例

加载脚本后即可像下面这样初始化（沿用文档中的核心示例，并补齐缺失的loadBasic步骤）：

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

关键点说明

• palette: "greens"是注册到引擎 PluginManager 中的名称。lazy 入口将其注册为"greens"（见 index.lazy.ts 中const paletteName = "greens"）。
• 加载调色板必须在tsParticles.load(...)之前完成——这与引擎 PluginManager.ts 中register方法的限制一致：插件注册只能发生在load()之前（#initialized之前），否则会抛出 "Register plugins can only be done before calling tsParticles.load()"。
• 配置项number.value、shape.type、size.value、move等均来自你加载的运行时包（如@tsparticles/basic），调色板本身不包含这些行为配置。

Customization：可完全覆盖

文档特别强调：调色板引入的选项与标准 tsParticles 配置一样，所有属性都可以被你的显式配置覆盖。例如你可以覆盖background、particles下的任意字段：

const options = { background: { color: "#000000" }, // 覆盖调色板自带背景色 #001400 particles: { number: { value: 300 }, shape: { type: "circle" }, size: { value: { min: 5, max: 12 } }, move: { enable: true, speed: 1.5 }, }, palette: "greens", };

覆盖顺序由引擎配置加载机制保证：调色板导入发生在data.palette解析时（见下文），你显式提供的字段会在此基础上覆盖或补充。

使用带 tsParticles 组件库的框架

如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等 tsParticles 组件库，则查阅对应组件库文档，在初始化前调用loadGreensPalette函数即可，用法与上面一致。

Greens 调色板的完整配色

原文档以表格形式完整列出了 Greens 调色板的所有颜色。其中包含：粒子填充色系（含多档绿色）、背景色、以及中性/辅助色（黑、白、灰及一个深蓝#1D3557），并标注了 Blend mode 为source-over、Fill 为true。

注意：README 表格中标注的 Blend mode（source-over）与仓库实际源码 options.ts 中定义的blendMode: "screen"不一致，实际运行时以源码为准（源码中还额外定义了background: "#001400"）。这也提醒我们：调色板的真实效果应以包内 options 源码为准，README 表格可能滞后于实现。

粒子填充色（源码中的 6 档绿色）

背景与辅助色（README 表格所列）

README 表格同时给出了 Blend modesource-over与 Filltrue两项元信息。如果你希望粒子呈现"发光叠加"的烟雾感，可在选项里显式配置blend.mode。

源码解析：Greens 调色板的数据结构

调色板本质是一个符合引擎IPalette接口的对象。查看 engine/src/Core/Interfaces/IPalette.ts 可以了解其完整结构：

Greens 调色板实际导出的数据见 palettes/monochromatic/greens/src/options.ts：

export const options: IPalette = { name: "Monochrome Greens", background: "#001400", blendMode: "screen", colors: { fill: { enable: true, value: [ "#0A3A0A", "#1A6B1A", "#2EA82E", "#55CC55", "#88E888", "#C0F5C0", ], }, }, };

可见该调色板使用screen（滤色）混合模式，背景为近黑的深绿#001400，粒子填充色为 6 档绿色渐变。由于启用了screen模式，粒子重叠处颜色会变亮，从而产生类似彩色烟雾/发光的视觉效果——这正是 README 首行所描述的 "colored smoke" 效果。

引擎如何应用 Palette：底层实现原理

当你在选项中写下palette: "greens"时，引擎内部经历了以下过程（见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts）：

1. 注册：loadGreensPalette(engine)调用engine.pluginManager.register(...)，通过 PluginManager.addPalette 将"greens" → options存入palettes映射表。
2. 顶层导入：Options.doLoad检测到data.palette后调用#importPalette，通过pluginManager.getPalette("greens")取出数据，然后以options.load(...)方式注入背景色与 blend 配置：

   this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });

3. 粒子级导入：ParticlesOptions.doLoad检测到data.palette（此时是particles.palette）后再次#importPalette，将调色板的colors.fill（可选colors.stroke）转换为引擎内部的paint配置（包含color.value、enable、opacity）与 blend 配置，从而让每个粒子从调色板的颜色集合中取值渲染。
4. 查询接口：PluginManager.getPalette(name)提供了按名取回调色板的统一入口（见 PluginManager.ts）。

从源码结构看，Palette 机制是在引擎核心（engine）中实现的通用能力，greens 只是众多已发布调色板之一；仓库的palettes/目录下还包含 atmosphere、confetti、fireworks、nature、space、water 等大量同构调色板（例如palettes/monochromatic/家族），它们都遵循完全相同的IPalette数据格式与加载流程。engine 核心同时提供plugins/colors（hex、hsl、rgb、oklab 等颜色解析插件）来支持各种颜色格式的解析。

效果预览与实测

仓库中提供了该调色板的示例截图 palettes/monochromatic/greens/images/sample.png。从截图可见：背景为接近纯黑的深色，粒子为绿色系的单色渐变（从亮绿到接近白色），大小不一、随机分布并带有自然动态感——这与源码screen混合模式 + 6 档绿色填充色的设定吻合，可作为你配置后的效果参照。

常见问题

Q1：为什么设置了palette后粒子没有颜色变化？确认你是否在load()之前调用了loadGreensPalette(engine)，并且加载的运行时包（如@tsparticles/basic）确实存在。同时注意调色板只定义颜色，number、shape、move等行为仍需自行配置。

Q2：CDN 脚本加载后如何调用？CDN bundle 会向全局暴露loadMonochromeGreensPalette（见 browser.ts 中的挂载逻辑），同时 browser.ts 也会把__tsParticlesInternals挂到globalThis上。若你使用@tsparticles/palette-greens的 CDN bundle，请以该包实际暴露的全局函数名为准调用。

Q3：如何让粒子边缘发光、呈现烟雾感？Greens 调色板已自带screen混合模式；如需更强发光效果，可配合blend相关选项、paint配置或粒子透明度做叠加调整。

Q4：可以自定义颜色吗？可以。调色板只是默认配色，你可以在 options 中显式覆盖background、blend、paint、particles等任意字段（文档 Customization 部分强调所有属性均可覆盖）。

相关资源

• 更多 Presets 与 Palettes 目录：palettes/（monochromatic 家族位于 palettes/monochromatic）
• 颜色解析插件：plugins/colors（含 hex、hsl、hsv、hwb、lab、lch、named、oklab、oklch、rgb）
• 引擎核心 Palette 机制：engine/src/Core/Interfaces/IPalette.ts、engine/src/Core/Utils/PluginManager.ts
• 选项加载入口：engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts </｜DSML｜parameter> </｜DSML｜invoke>

【免费下载链接】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