tsParticles pastel sunset 调色板：@tsparticles/palette-pastel-sunset 的颜色定义、注册机制与接入方法

tsParticles pastel sunset 调色板：@tsparticles/palette-pastel-sunset 的颜色定义、注册机制与接入方法

【免费下载链接】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 调色板（palette）负责为粒子动画提供统一的背景色、混合模式与填充色集合。本文以仓库中palettes/pastel/sunset子包为研究对象，完整梳理 pastel sunset 调色板包含的具体颜色值、它在引擎中通过pluginManager.addPalette注册的源码链路，以及如何配合@tsparticles/engine与运行时基础包（如@tsparticles/basic）在页面中实际应用并自定义这套配色。

调色板包概述

palettes/pastel/sunset是 monorepo 中的一个独立 npm 子包，包名为@tsparticles/palette-pastel-sunset（见 package.json），其唯一运行时依赖是工作区内的@tsparticles/engine，属于纯数据 + 注册函数式的轻量包，不包含任何粒子行为逻辑。

官方 README（README.md）给出的使用步骤可以概括为三步：

1. 安装@tsparticles/engine（或改用 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在调用tsParticles.load(...)之前先调用调色板的load函数；
3. 在粒子选项里应用该调色板，并给出一份最简的粒子配置。

需要注意的前提是：调色板只定义颜色，不定义完整行为，因此必须与运行时包和粒子选项搭配使用才能看到效果。

颜色构成：源码中的真实配色

调色板的实际颜色定义在 src/options.ts 中，它导出一个符合引擎IPalette接口的对象：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Pastel Sunset", background: "#FFF3E6", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#FFD4B3", "#FFCCBA", "#FFD9B3", "#FFCAB3", "#FFE4BA", "#FFC9BA", ], }, }, };

从源码看，这套 pastel sunset 配色由三部分组成：

6 种填充色均为低饱和度的暖橙-米粉色调：#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA。

而 README.md 中的 “Colors” 色卡表则展示了一组更大的预览色板，包括深棕橙渐变（#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500）、浅米色系（#FFF3E6、#FFEFD7、#FFD4B3、#FFCCBA、#FFD9B3、#FFCAB3、#FFE4BA、#FFC9BA）以及一组中性灰阶与深色（#090500、#000000、#FFFFFF、#F5F5F5、#1E1E1E、#252525、#E0E0A0A0（原文为#A0A0A0）、#404040、#1D3557）。这里需要说明一个事实边界：色卡表是文档层面的展示集合，真正参与粒子渲染的颜色以src/options.ts中的 6 个fill.value为准；同时 README 底部 “Background” 一行标注的#1A1000与源码中background: "#FFF3E6"并不一致（README 内容带有明显的模板生成痕迹），实际背景色请以源码文件 src/options.ts 为准。

注册机制：loadPastelSunsetPalette 的源码链路

标准入口

调色板对外暴露的加载函数定义在 src/index.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "pastel-sunset"; export async function loadPastelSunsetPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

关键点有两个：

• 注册键名是"pastel-sunset"。这正是后续粒子选项里palette字段需要填的值；
• 注册动作通过engine.pluginManager.register(...)延迟执行，确保在引擎初始化完成后才写入调色板。

addPalette的实现位于引擎侧 PluginManager.ts，逻辑非常直接——把调色板对象以名字为 key 存入内部palettesMap：

addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }

惰性（lazy）入口

src/index.lazy.ts 提供同名的 lazy 版本，区别在于options通过await import("./options.js")动态引入：

export async function loadPastelSunsetPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(async e => { const { options } = await import("./options.js"); e.pluginManager.addPalette(paletteName, options); }); }

从源码结构看，lazy 入口把颜色数据拆到独立的 chunk 中，适合对打包体积敏感、希望按需加载调色板数据的场景。package.json 的exports字段中同时暴露了.与./lazy两个子路径，并分别映射到 ESM、CJS、UMD、browser 与类型声明产物。

浏览器全局入口

src/browser.ts 是 UMD/CDN 场景的入口，它会把加载函数挂到全局对象上：

globalObject.loadPastelSunsetPalette = loadPastelSunsetPalette;

因此在 CDN 环境下脚本加载完成后，可以直接调用全局函数loadPastelSunsetPalette(engine)。

IPalette 接口约束

调色板对象必须符合引擎定义在 IPalette.ts 的接口：

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

其中IPaletteColors同时支持fill（填充色，含enable、opacity、value）和stroke（描边色，含value、width）两个可选段，且colors本身支持“单组或多组”结构。pastel sunset 只使用了fill段，未定义描边色，也未启用opacity范围值——意味着粒子将以纯色、不透明度默认值渲染。

实际接入方式

npm 方式（vanilla JS / TypeScript）

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-pastel-sunset

然后在初始化时按“基础包 → 调色板 → 加载实例”的顺序注册：

import { tsParticles, loadBasic } from "@tsparticles/basic"; import { loadPastelSunsetPalette } from "@tsparticles/palette-pastel-sunset"; (async () => { await loadBasic(tsParticles.engine); await loadPastelSunsetPalette(tsParticles.engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "pastel-sunset", // 必须与注册键名一致 }; await tsParticles.load({ id: "tsparticles", options }); })();

若使用 lazy 入口，只需把导入来源换成@tsparticles/palette-pastel-sunset/lazy，函数名与调用方式不变。

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-pastel-sunset@4/tsparticles.palette-pastel-sunset.umd.min.js"></script>

需要提醒：仓库中 README.md 的 CDN 片段沿用了模板包名tsparticles.palette-coloredSmokeAmber.min.js，函数名写作loadSunsetPalette，这些与其自身package.json（@tsparticles/palette-pastel-sunset、loadPastelSunsetPalette）不符。接入 CDN 时应以package.json声明的包名与 src/browser.ts 暴露的全局函数名为准，并核对 jsDelivr 上实际产物的文件名。

框架组件库

如果使用 React、Vue、Angular、Svelte 等组件封装，思路一致：先确保引擎中注册了loadPastelSunsetPalette，再在组件 props 中传入粒子选项（含palette: "pastel-sunset"）。

自定义与覆盖

README 明确说明：调色板应用后，所有粒子选项仍可按标准 tsParticles 配置方式覆盖。结合IPalette接口，常见的微调方向包括：

• 换背景：在实例选项中单独设置background，覆盖#FFF3E6；
• 改混合模式：如需要发光叠加效果，可在引擎层面调整blendMode（调色板默认是source-over）；
• 改填充色：直接修改particles.color相关选项，或在自定义调色板对象中扩展fill.value数组；
• 加描边：IPaletteColors支持stroke段，可在自建调色板中补充stroke.value与stroke.width（pastel sunset 默认未提供）。

小结

pastel sunset 是 tsParticles 调色板体系中的一个标准子包：src/options.ts提供 6 色暖调填充色与#FFF3E6背景，src/index.ts/src/index.lazy.ts分别以标准与惰性方式调用pluginManager.addPalette("pastel-sunset", options)完成注册，src/browser.ts面向 CDN 场景暴露全局函数。理解了 “数据（IPalette）— 注册（addPalette）— 选项引用（palette 键名）” 这条链路后，同样的方法可以迁移到仓库palettes/目录下的其他调色包子包。

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