企业官网建设流程全解析

tsParticles 棕色单色调色板（Monochrome Brown Palette）使用指南：从安装配置到源码级解析

【免费下载链接】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）」扩展包，用于为粒子效果快速套用统一、协调的配色方案。本文以@tsparticles/palette-monochrome-brown为例，完整讲解棕色单色调色板的 6 种粒子颜色与背景色的具体取值、CDN 与 npm 两种加载方式、最小可用配置示例，并结合仓库源码剖析IPalette数据结构与addPalette注册机制的底层实现，帮助你在 5 分钟内让粒子效果拥有沉稳、优雅的棕色系视觉风格。

调色板是什么：只定义颜色，不定义行为

使用任何 tsParticles 调色板前，需要先明确一个核心概念：调色板只负责提供颜色方案，不包含粒子数量、形状、运动等行为配置。正如官方 README 所强调的："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(...)之前调用loadBrownPalette注册调色板；
3. 在配置项中通过palette: "brown"指定调色板，同时补充必要的粒子行为配置。

棕色单色调色板的完整配色方案

该调色板包含 6 个粒子填充色、1 个背景色，以及 1 个混合模式设置，全部定义在仓库的 options.ts 中：

从源码可以看出，这组颜色是从浅到深的完整棕色渐变序列（#F5DEB3→#DEB887→#CD853F→#8B4513→#5C3317→#2F1B0A），搭配接近纯黑的背景#0a0600，形成强烈的明暗对比，非常适合作为网站的动态背景或氛围点缀。

IPalette 数据结构的源码印证

调色板的类型定义位于引擎的 IPalette.ts：

export interface IPalette { name: string; background: string; blendMode: GlobalCompositeOperation; colors: IPaletteColors; // 包含 fill / stroke 两套可选颜色 }

而棕色调色板正是这一接口的具体实现（完整内容见 options.ts）：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Monochrome - Brown", background: "#0a0600", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#F5DEB3", "#DEB887", "#CD853F", "#8B4513", "#5C3317", "#2F1B0A", ], }, }, };

注意这里的几个关键字段：

• name：调色板的显示名称；
• background：画布背景色；
• blendMode：粒子绘制时使用的 Canvas 全局混合模式（GlobalCompositeOperation），默认source-over即标准叠加；
• colors.fill：填充色列表，粒子会从这组颜色中取样；IPaletteColors同样支持stroke（描边色），只是本调色板未启用。

当调色板被应用时，引擎会在初始化阶段读取blendMode并将其应用到全局选项的混合模式上，相关逻辑可在 Options.ts 与 ParticlesOptions.ts 中看到：mode: paletteData.blendMode。

快速上手清单

官方 README 给出了一份精简的快速清单，翻译整理如下：

1. 安装@tsparticles/engine（或直接使用 CDN 打包文件）；
2. 加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadBrownPalette；
3. 在 options 中应用该调色板并补充一份最小化的粒子配置。

强调：调色板只提供颜色，粒子数量、形状、大小、运动等仍需自行配置。

安装与使用

方式一：CDN / Vanilla JS / jQuery

在 HTML 中依次引入基础包与调色板包两个脚本：

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

说明：上述第二行 CDN 文件名沿用了包的历史命名palette-coloredSmokeAmber（可在 package.dist.json 的jsdelivr/unpkg字段中确认），其实际 npm 包名为@tsparticles/palette-monochrome-brown。

方式二：npm 模块

该包的 npm 名称为@tsparticles/palette-monochrome-brown，版本与引擎保持同步（当前仓库内为 4.x，见 package.json）。支持 ESM（dist/esm）、CommonJS（dist/cjs）、浏览器（dist/browser）与 UMD 多种产物格式，且声明了sideEffects: false，可安全参与 tree-shaking。

最小可用配置示例

脚本加载完成后，即可像下面这样初始化粒子效果（完整示例见官方 README）：

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

上述配置的核心要点：

• await loadBasic(engine)：注册最基础的粒子运行时能力（形状、大小、移动等），必须先于load调用；
• await loadBrownPalette(engine)：把棕色调色板注册进引擎，同样必须在load之前完成；
• palette: "brown"：在 options 中通过名称指定使用该调色板，粒子将自动从棕色的 6 个填充色中取样；
• 其余number（粒子数量 200）、shape（圆形）、size（10~15 随机）、move（开启移动、速度 2）等，都属于调色板之外的常规粒子行为配置。

自定义与覆盖

调色板会为粒子注入颜色，但不会限制你对任何其他选项的覆盖。你可以像标准的 tsParticles 安装一样，直接定义particles下的任意属性（数量、形状、大小、运动、透明度、旋转等）来覆盖默认行为，调色板只负责颜色维度。

框架组件库用法

如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架，tsParticles 均提供了对应的组件库（仓库中的wrappers/与demo/目录下可找到各框架的示例工程）。组件库用法与原生方式一致：在组件初始化逻辑中调用loadBrownPalette函数完成注册，然后在 options 中设置palette: "brown"即可。

源码级原理：调色板是如何被注册与应用的

两个加载入口：常规与懒加载

仓库为该调色板提供了两个注册函数，对应不同的加载策略：

1. 常规入口loadMonochromeBrownPalette（index.ts）：

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

2. 懒加载入口loadBrownPalette（index.lazy.ts）：

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

两者的差异非常清晰：

• index.ts静态导入options，注册名称为monochrome-brown；
• index.lazy.ts使用动态import()按需加载options（配合代码分割可减小首屏体积），注册名称为brown——官方 README 示例与 options 中使用的palette: "brown"对应的正是这个懒加载入口注册的名称。

底层注册机制：pluginManager.addPalette

两个入口最终都调用引擎PluginManager的addPalette(name, palette)方法（实现见 PluginManager.ts），将「调色板名称 → IPalette 数据」注册到引擎内部。随后在加载 options 时，引擎根据palette字段查找已注册的调色板数据，把其中的background应用于画布背景、把blendMode应用于混合模式、把colors.fill作为粒子的可选颜色来源。

浏览器全局变量

在浏览器（UMD）场景下，browser.ts 会将loadMonochromeBrownPalette挂载到globalThis上，同时通过__tsParticlesInternals保留内部引用，因此 CDN 引入后可以直接在全局作用域调用该函数完成注册。

小结与延伸阅读

棕色调色板是 tsParticles 官方调色板体系（palettes/目录）中的一员，同系列还有 monochromatic 下的 blues、greens、noir、reds、white、yellows 等多个色系（见 palettes/monochromatic）。它们共享同一套IPalette数据结构和addPalette注册机制，学会了棕色板的用法即可举一反三。

如果你需要进一步探索：

• 调色板的类型定义与可选字段：IPalette.ts；
• 调色板注册与查找的实现：PluginManager.ts；
• 引擎如何消费调色板数据：Options.ts、ParticlesOptions.ts；
• 各框架组件库与演示工程：wrappers 与 demo；
• 构建产物与发布配置：package.json、rollup.config.js。

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