@tsparticles/configs 4.2.1 → 4.3.0

package/tsparticles.configs.js

@@ -1,12 +1,12 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Utility v4.2.1 */
+/* Utility v4.3.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@tsparticles/engine')) :
     typeof define === 'function' && define.amd ? define(['@tsparticles/engine'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.__tsParticlesInternals.engine));
 })(this, (function (engine) { 'use strict';
 
-    const options$2_ = {
+    const options$30 = {
         key: "absorbers",
         name: "Absorbers",
         particles: {
@@ -19,7 +19,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -79,7 +79,7 @@
         },
     };
 
-    const options$2Z = {
+    const options$2$ = {
         key: "amongUs",
         name: "Among Us",
         particles: {
@@ -213,11 +213,79 @@
     };
 
     var a = {
-        absorbers: options$2_,
-        amongUs: options$2Z,
+        absorbers: options$30,
+        amongUs: options$2$,
     };
 
-    const options$2Y = {
+    let hue = 0;
+    const options$2_ = {
+        key: "backgroundCanvas",
+        name: "Background Canvas",
+        particles: {
+            number: {
+                value: 80,
+                density: {
+                    enable: true,
+                },
+            },
+            paint: {
+                fill: {
+                    color: {
+                        value: "#f0f0f0",
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: 0.5,
+            },
+            size: {
+                value: {
+                    min: 1,
+                    max: 3,
+                },
+            },
+            links: {
+                enable: true,
+                distance: 150,
+                color: "#f0f0f0",
+                opacity: 0.4,
+                width: 1,
+            },
+            move: {
+                enable: true,
+                speed: 2,
+            },
+        },
+        interactivity: {
+            events: {
+                onHover: {
+                    enable: true,
+                    mode: "repulse",
+                },
+            },
+            modes: {
+                repulse: {
+                    distance: 100,
+                },
+            },
+        },
+        background: {
+            draw: (ctx, delta) => {
+                hue = (hue + delta.value * 0.02) % 360;
+                const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
+                gradient.addColorStop(0, `hsl(${hue}, 70%, 20%)`);
+                gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 70%, 10%)`);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            },
+        },
+    };
+
+    const options$2Z = {
         key: "backgroundMask",
         name: "Background Mask",
         particles: {
@@ -230,7 +298,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -250,7 +318,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 1,
                 width: 1,
             },
@@ -296,7 +364,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
             image: "url('https://particles.js.org/images/hdr/background3.jpg')",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -304,6 +372,77 @@
         },
     };
 
+    const saturation = 70, lightness = 50, toSeconds = 0.001, options$2Y = {
+        key: "backgroundMaskDraw",
+        name: "Background Mask Draw",
+        particles: {
+            number: {
+                value: 80,
+            },
+            paint: {
+                fill: {
+                    color: {
+                        value: "#f0f0f0",
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: "circle",
+            },
+            opacity: {
+                value: 1,
+            },
+            size: {
+                value: {
+                    min: 10,
+                    max: 30,
+                },
+            },
+            move: {
+                enable: true,
+                speed: 2,
+            },
+        },
+        interactivity: {
+            events: {
+                onHover: {
+                    enable: true,
+                    mode: "bubble",
+                },
+                onClick: {
+                    enable: true,
+                    mode: "push",
+                },
+            },
+            modes: {
+                bubble: {
+                    distance: 400,
+                    size: 100,
+                    duration: 2,
+                    opacity: 1,
+                },
+                push: {
+                    quantity: 4,
+                },
+            },
+        },
+        backgroundMask: {
+            enable: true,
+            cover: {
+                draw: (ctx, _delta) => {
+                    const t = performance.now() * toSeconds, w = ctx.canvas.width, h = ctx.canvas.height, speed = 30, fullCircle = 360, hue = (t * speed) % fullCircle;
+                    ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+                    const originX = 0, originY = 0;
+                    ctx.fillRect(originX, originY, w, h);
+                },
+            },
+        },
+        background: {
+            color: "#0d0d0d",
+        },
+    };
+
     const options$2X = {
         key: "backgroundMaskImage",
         name: "Background Mask Image",
@@ -314,7 +453,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -371,7 +510,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
             image: "url('https://particles.js.org/images/hdr/background3.jpg')",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -417,7 +556,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -447,7 +586,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -616,7 +755,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
         },
         blend: {
             enable: true,
@@ -707,7 +846,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
         },
         blend: {
             enable: true,
@@ -798,7 +937,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
         },
     };
 
@@ -815,7 +954,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: ["#ffffff", "#77ccff", "#ff3333", "#ffff33"],
+                        value: ["#f0f0f0", "#77ccff", "#ff3333", "#ffff33"],
                     },
                     enable: true,
                 },
@@ -865,7 +1004,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -914,7 +1053,7 @@
             links: {
                 enable: false,
                 distance: 200,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 1,
                 width: 2,
             },
@@ -966,7 +1105,9 @@
     };
 
     var b = {
-        backgroundMask: options$2Y,
+        backgroundCanvas: options$2_,
+        backgroundMask: options$2Z,
+        backgroundMaskDraw: options$2Y,
         backgroundMaskImage: options$2X,
         basic: options$2W,
         big: options$2V,
@@ -996,7 +1137,7 @@
                             paint: {
                                 fill: {
                                     color: {
-                                        value: "#000000",
+                                        value: "#1a1a1a",
                                     },
                                     enable: true,
                                 },
@@ -1032,7 +1173,7 @@
                             paint: {
                                 fill: {
                                     color: {
-                                        value: "#000000",
+                                        value: "#1a1a1a",
                                     },
                                     enable: true,
                                 },
@@ -1073,7 +1214,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
     };
 
@@ -1087,13 +1228,13 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
                 stroke: {
                     width: 1,
-                    color: { value: "#000" },
+                    color: { value: "#1a1a1a" },
                 },
             },
             number: {
@@ -1138,7 +1279,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
     };
 
@@ -1152,13 +1293,13 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
                 stroke: {
                     width: 1,
-                    color: { value: "#000" },
+                    color: { value: "#1a1a1a" },
                 },
             },
             number: {
@@ -1231,7 +1372,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
     };
 
@@ -1251,7 +1392,7 @@
                 },
                 stroke: {
                     width: 1,
-                    color: { value: "#ffffff" },
+                    color: { value: "#f0f0f0" },
                 },
             },
             shape: {
@@ -1353,7 +1494,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -1373,7 +1514,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -1435,7 +1576,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                 },
             },
@@ -1454,7 +1595,7 @@
             links: {
                 enable: false,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -1522,7 +1663,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -1542,7 +1683,7 @@
             links: {
                 enable: false,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -1653,7 +1794,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         poisson: {
             enable: true,
@@ -1745,7 +1886,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -1753,7 +1894,7 @@
         key: "colors",
         name: "Colors",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         interactivity: {
             events: {
@@ -2061,13 +2202,13 @@
                     enable: true,
                 },
                 stroke: {
-                    color: { value: "#fff" },
+                    color: { value: "#f0f0f0" },
                     width: 1,
                 },
             },
             links: {
                 blink: false,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 consent: false,
                 distance: 150,
                 enable: false,
@@ -2103,7 +2244,7 @@
         polygon: {
             draw: {
                 enable: false,
-                lineColor: "#ffffff",
+                lineColor: "#f0f0f0",
                 lineWidth: 0.5,
             },
             move: {
@@ -2114,7 +2255,7 @@
             url: "",
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -2166,11 +2307,11 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         trail: {
             fill: {
-                color: "#000",
+                color: "#121212",
             },
             enable: true,
             length: 1000,
@@ -2298,7 +2439,7 @@
             },
         ],
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -2345,7 +2486,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -2375,7 +2516,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -2384,7 +2525,7 @@
         name: "Delay Color",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         particles: {
@@ -2429,14 +2570,14 @@
         name: "Delay Opacity",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         particles: {
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -2473,14 +2614,14 @@
         name: "Delay Size",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         particles: {
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -2517,7 +2658,7 @@
         name: "Delay Stroke Color",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         particles: {
@@ -2572,7 +2713,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -2592,7 +2733,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -2706,7 +2847,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -2715,7 +2856,7 @@
         name: "Disappearing",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         emitters: {
@@ -2855,7 +2996,7 @@
                     duration: 2,
                     opacity: 0.8,
                     size: 6,
-                    color: "#000000",
+                    color: "#1a1a1a",
                 },
                 grab: {
                     distance: 400,
@@ -2879,13 +3020,13 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
             },
             links: {
-                color: "#ffffff",
+                color: "#f0f0f0",
                 distance: 150,
                 enable: true,
                 opacity: 0.4,
@@ -3009,7 +3150,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -3059,7 +3200,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -3159,7 +3300,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -3219,7 +3360,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -3281,7 +3422,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -3298,7 +3439,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -3318,7 +3459,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#000",
+                color: "#1a1a1a",
                 opacity: 0.4,
                 width: 1,
             },
@@ -3409,7 +3550,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             {
@@ -3572,7 +3713,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -3592,7 +3733,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#000",
+                color: "#1a1a1a",
                 opacity: 0.4,
                 width: 1,
             },
@@ -3637,7 +3778,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -3750,7 +3891,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             {
@@ -3854,7 +3995,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             generateEmitter$3("canvas", {
@@ -3910,7 +4051,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: {
             particles: {
@@ -4015,7 +4156,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -4035,7 +4176,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             {
@@ -4094,7 +4235,7 @@
         ],
         trail: {
             enable: true,
-            fill: { color: "#fff" },
+            fill: { color: "#f0f0f0" },
             length: 20,
         },
     };
@@ -4145,7 +4286,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -4161,7 +4302,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             generateEmitter$2("square", {}, true, { x: 25, y: 25 }),
@@ -4217,7 +4358,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: [
             {
@@ -4473,7 +4614,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             generateEmitter$1("canvas", {
@@ -4577,7 +4718,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: [
             generateEmitter("canvas", {
@@ -4624,7 +4765,7 @@
         key: "fallingConfetti",
         name: "Falling Confetti",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             paint: {
@@ -4766,7 +4907,7 @@
         key: "fallingConfettiWithRibbons",
         name: "Falling Confetti with Ribbons",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             paint: {
@@ -4987,7 +5128,7 @@
             enable: true,
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "top",
@@ -5162,7 +5303,7 @@
                 },
                 stroke: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     width: 1,
                 },
@@ -5205,7 +5346,7 @@
             volume: 50,
         },
         trail: {
-            fill: { color: "#000" },
+            fill: { color: "#121212" },
             enable: true,
             length: 10,
         },
@@ -5218,7 +5359,7 @@
             enable: true,
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "top",
@@ -5244,7 +5385,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -5450,7 +5591,7 @@
             enable: true,
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         blend: {
             enable: true,
@@ -5660,7 +5801,7 @@
             enable: true,
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
             image: "url('https://particles.js.org/images/hdr/background3.jpg')",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -5669,7 +5810,7 @@
         backgroundMask: {
             enable: true,
             cover: {
-                color: "#000",
+                color: "#1a1a1a",
             },
         },
         emitters: {
@@ -5696,7 +5837,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -5885,18 +6026,18 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
                 stroke: {
-                    color: { value: "#ffffff" },
+                    color: { value: "#f0f0f0" },
                     width: 1,
                 },
             },
             links: {
                 blink: false,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 consent: false,
                 distance: 150,
                 enable: true,
@@ -6045,7 +6186,7 @@
             },
         },
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
         },
     };
 
@@ -6093,14 +6234,13 @@
             },
             shape: {
                 options: {
-                    image: {
-                        gif: true,
+                    gif: {
                         height: 200,
                         src: "https://particles.js.org/images/mario.gif",
                         width: 200,
                     },
                 },
-                type: "image",
+                type: "gif",
             },
             size: {
                 value: {
@@ -6149,7 +6289,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -6195,7 +6335,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -6216,7 +6356,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6230,7 +6370,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6244,7 +6384,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6258,7 +6398,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6272,7 +6412,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6315,7 +6455,7 @@
                         },
                         {
                             stop: 1,
-                            value: "#000000",
+                            value: "#1a1a1a",
                             opacity: 0,
                         },
                     ],
@@ -6370,7 +6510,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
     };
 
@@ -6393,7 +6533,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -6431,7 +6571,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "top",
@@ -6494,7 +6634,7 @@
         },
         trail: {
             enable: true,
-            fill: { color: "#000000" },
+            fill: { color: "#121212" },
             length: 10,
         },
     };
@@ -6546,7 +6686,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -6566,7 +6706,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -6626,7 +6766,7 @@
             links: {
                 enable: false,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -6637,7 +6777,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -6708,7 +6848,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "none",
@@ -6726,7 +6866,7 @@
             },
         },
         trail: {
-            fill: { color: "#000" },
+            fill: { color: "#121212" },
             length: 20,
             enable: true,
         },
@@ -6783,13 +6923,13 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
             },
             links: {
-                color: "#ffffff",
+                color: "#f0f0f0",
                 distance: 25,
                 enable: true,
                 opacity: 0.4,
@@ -6828,7 +6968,7 @@
             draw: {
                 enable: true,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 0.5,
                     opacity: 0.2,
                 },
@@ -6845,7 +6985,7 @@
             url: "https://particles.js.org/images/hdr/hollowknight.svg",
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -6857,7 +6997,7 @@
         key: "hyperspace",
         name: "Hyperspace",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         particles: {
             paint: {
@@ -6918,7 +7058,7 @@
             },
         },
         trail: {
-            fill: { color: "#000" },
+            fill: { color: "#121212" },
             length: 30,
             enable: true,
         },
@@ -6983,7 +7123,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7047,7 +7187,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7163,7 +7303,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         preload: [
             {
@@ -7353,7 +7493,7 @@
             draw: {
                 enable: false,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 0.5,
                     opacity: 0.2,
                 },
@@ -7366,7 +7506,7 @@
             url: "",
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -7432,7 +7572,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -7453,7 +7593,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7507,7 +7647,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -7537,7 +7677,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7579,7 +7719,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -7622,7 +7762,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7744,7 +7884,7 @@
                 width: 1,
                 triangles: {
                     enable: true,
-                    color: "#ffffff",
+                    color: "#f0f0f0",
                     opacity: 0.1,
                 },
             },
@@ -7789,7 +7929,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -7816,14 +7956,14 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
             },
             links: {
                 blink: false,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 consent: false,
                 distance: 30,
                 enable: false,
@@ -7855,7 +7995,7 @@
             draw: {
                 enable: true,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 0.5,
                     opacity: 0.2,
                 },
@@ -7876,7 +8016,7 @@
             data: '<svg xmlns="http://www.w3.org/2000/svg" height="200" width="150"><path d="M 75,0 0,200 h 150 z" /></svg>',
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -7959,7 +8099,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -7972,7 +8112,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -8046,14 +8186,14 @@
             enable: true,
             length: 10,
             fill: {
-                color: "#000",
+                color: "#121212",
             },
         },
         poisson: {
             enable: true,
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8066,7 +8206,7 @@
             },
             paint: {
                 color: {
-                    value: "#000",
+                    value: "#1a1a1a",
                 },
             },
             effect: {
@@ -8102,7 +8242,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         emitters: {
             position: {
@@ -8161,7 +8301,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -8192,7 +8332,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8241,7 +8381,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -8286,7 +8426,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8328,7 +8468,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -8378,7 +8518,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8420,7 +8560,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -8465,7 +8605,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8482,7 +8622,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: ["#ffffff", "#ff0000"],
+                        value: ["#f0f0f0", "#ff0000"],
                     },
                     enable: true,
                 },
@@ -8567,7 +8707,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8762,7 +8902,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8817,7 +8957,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -8825,7 +8965,7 @@
         key: "mouseFollow",
         name: "Mouse Follow",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         interactivity: {
             events: {
@@ -8857,7 +8997,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -8948,7 +9088,7 @@
         key: "mouseParticle2",
         name: "Mouse Particle 2",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             number: {
@@ -8985,7 +9125,7 @@
             links: {
                 enable: true,
                 distance: 200,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -9048,7 +9188,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -9135,7 +9275,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9277,7 +9417,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9319,7 +9459,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -9365,7 +9505,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9406,7 +9546,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -9453,7 +9593,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9500,7 +9640,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9547,7 +9687,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9762,7 +9902,7 @@
             draw: {
                 enable: true,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 0.5,
                     opacity: 0.2,
                 },
@@ -9783,7 +9923,7 @@
             url: "https://particles.js.org/images/hdr/google.svg",
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -9952,7 +10092,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -9969,7 +10109,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                 },
             },
@@ -10159,7 +10299,7 @@
         key: "noisePlanesFractal",
         name: "Noise Planes Fractal",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         interactivity: {
             events: {
@@ -10250,7 +10390,7 @@
         key: "noisePlanesPerlin",
         name: "Noise Planes Perlin",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         interactivity: {
             events: {
@@ -10341,7 +10481,7 @@
         key: "noisePlanesSimplex",
         name: "Noise Planes Simplex",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         interactivity: {
             events: {
@@ -10441,7 +10581,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -10505,7 +10645,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -10607,7 +10747,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -10637,7 +10777,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -10689,7 +10829,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -10705,7 +10845,7 @@
     const palettes$1 = {
         test: {
             name: "Test",
-            background: "#000000",
+            background: "#0d0d0d",
             blendMode: "lighter",
             colors: {
                 fill: {
@@ -10754,7 +10894,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -10787,7 +10927,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -10918,7 +11058,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11015,7 +11155,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11106,7 +11246,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11196,7 +11336,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11288,7 +11428,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11379,7 +11519,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11406,13 +11546,13 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
             },
             links: {
-                color: "#ffffff",
+                color: "#f0f0f0",
                 distance: 30,
                 enable: true,
                 opacity: 0.4,
@@ -11448,7 +11588,7 @@
             draw: {
                 enable: true,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 0.5,
                     opacity: 0.2,
                 },
@@ -11475,7 +11615,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -11571,7 +11711,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -11658,13 +11798,13 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         trail: {
             enable: true,
             length: 10,
             fill: {
-                color: "#000000",
+                color: "#121212",
             },
         },
     };
@@ -11745,13 +11885,13 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         trail: {
             enable: true,
             length: 20,
             fill: {
-                color: "#000000",
+                color: "#121212",
             },
         },
     };
@@ -11815,7 +11955,7 @@
         name: "Plasma",
         background: {
             color: {
-                value: "#000000",
+                value: "#0d0d0d",
             },
         },
         particles: {
@@ -11828,7 +11968,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -11882,7 +12022,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -11909,7 +12049,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         poisson: {
             enable: true,
@@ -11971,14 +12111,14 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
             },
             links: {
                 blink: false,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 consent: false,
                 distance: 30,
                 enable: true,
@@ -12015,7 +12155,7 @@
             draw: {
                 enable: true,
                 stroke: {
-                    color: "#fff",
+                    color: "#f0f0f0",
                     width: 1,
                     opacity: 0.2,
                 },
@@ -12036,7 +12176,7 @@
             url: "https://particles.js.org/images/hdr/smalldeer.svg",
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -12057,7 +12197,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -12144,7 +12284,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -12242,7 +12382,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "none",
@@ -12352,7 +12492,7 @@
             },
             links: {
                 blink: false,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 consent: false,
                 distance: 150,
                 enable: false,
@@ -12384,7 +12524,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -12422,7 +12562,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -12681,7 +12821,7 @@
                             paint: {
                                 fill: {
                                     color: {
-                                        value: "#000000",
+                                        value: "#1a1a1a",
                                     },
                                 },
                             },
@@ -12714,7 +12854,7 @@
                             paint: {
                                 fill: {
                                     color: {
-                                        value: "#000000",
+                                        value: "#1a1a1a",
                                     },
                                 },
                             },
@@ -12728,7 +12868,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
         preload: [
             {
@@ -12837,7 +12977,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -12959,7 +13099,7 @@
             },
         },
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
         },
     };
 
@@ -13049,7 +13189,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -13072,7 +13212,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13089,7 +13229,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13128,7 +13268,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13145,7 +13285,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13184,7 +13324,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13201,7 +13341,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13240,7 +13380,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13257,7 +13397,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13296,7 +13436,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13313,7 +13453,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13352,7 +13492,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13369,7 +13509,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13408,7 +13548,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13425,7 +13565,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13464,7 +13604,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13481,7 +13621,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13520,7 +13660,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13537,7 +13677,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13576,7 +13716,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13593,7 +13733,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13632,7 +13772,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13649,7 +13789,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13688,7 +13828,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13705,7 +13845,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -13744,7 +13884,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13781,7 +13921,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -13864,7 +14004,7 @@
             },
         ],
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -13879,7 +14019,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -14018,7 +14158,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "none",
@@ -14047,7 +14187,7 @@
             },
         },
         trail: {
-            fill: { color: "#000" },
+            fill: { color: "#121212" },
             length: 30,
             enable: true,
         },
@@ -14067,7 +14207,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                 },
             },
@@ -14075,7 +14215,7 @@
                 type: "shadow",
                 options: {
                     shadow: {
-                        color: "#000000",
+                        color: "#1a1a1a",
                         blur: 5,
                         offset: {
                             x: 3,
@@ -14099,13 +14239,13 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
                 shadow: {
                     enable: true,
                     blur: 5,
-                    color: "#000000",
+                    color: "#1a1a1a",
                 },
             },
             move: {
@@ -14209,7 +14349,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -14252,7 +14392,7 @@
             links: {
                 enable: false,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -14307,7 +14447,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -14389,7 +14529,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: [
             {
@@ -14515,7 +14655,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: [
             {
@@ -14648,7 +14788,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -14693,7 +14833,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -14783,7 +14923,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -14836,7 +14976,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -14847,7 +14987,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#000",
+                        value: "#1a1a1a",
                     },
                     enable: true,
                 },
@@ -15072,7 +15212,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15100,7 +15240,7 @@
                 },
                 stroke: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                         animation: {
                             enable: true,
                             speed: 8,
@@ -15145,7 +15285,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15245,7 +15385,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15342,7 +15482,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15394,7 +15534,7 @@
             links: {
                 enable: false,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -15446,7 +15586,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15488,7 +15628,7 @@
             links: {
                 enable: false,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -15540,7 +15680,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -15557,7 +15697,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -15577,7 +15717,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -15643,7 +15783,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                 },
             },
@@ -15721,7 +15861,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -15793,7 +15933,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -15864,7 +16004,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -15958,7 +16098,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -16304,7 +16444,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -16360,7 +16500,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -16434,7 +16574,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             direction: "top",
@@ -16488,7 +16628,7 @@
         },
         trail: {
             enable: true,
-            fill: { color: "#000000" },
+            fill: { color: "#121212" },
             length: 10,
         },
     };
@@ -16541,11 +16681,11 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         trail: {
             enable: true,
-            fill: { color: "#000" },
+            fill: { color: "#121212" },
             length: 30,
         },
     };
@@ -16563,7 +16703,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -16597,7 +16737,7 @@
             links: {
                 enable: true,
                 distance: 600,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 2,
             },
@@ -16697,7 +16837,7 @@
             links: {
                 enable: true,
                 distance: 100,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -16742,7 +16882,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };
 
@@ -16819,7 +16959,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         style: {
             filter: "blur(50px)",
@@ -16828,7 +16968,7 @@
             enable: true,
             length: 50,
             fill: {
-                color: "#000",
+                color: "#121212",
             },
         },
     };
@@ -16890,7 +17030,7 @@
             },
             links: {
                 blink: false,
-                color: "#000",
+                color: "#1a1a1a",
                 consent: false,
                 distance: 150,
                 enable: false,
@@ -16947,7 +17087,7 @@
             },
         ],
         background: {
-            color: "#fff",
+            color: "#f5f7fa",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -16992,7 +17132,7 @@
         name: "Test",
         background: {
             color: {
-                value: "#000",
+                value: "#0d0d0d",
             },
         },
         particles: {
@@ -17054,7 +17194,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -17174,7 +17314,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -17250,7 +17390,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
             image: "",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -17271,13 +17411,13 @@
                 },
                 options: {
                     background: {
-                        color: "#ffffff",
+                        color: "#f5f7fa",
                     },
                     particles: {
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#000000", "#0000ff"],
+                                    value: ["#1a1a1a", "#0000ff"],
                                 },
                                 enable: true,
                             },
@@ -17294,13 +17434,13 @@
                 },
                 options: {
                     background: {
-                        color: "#000000",
+                        color: "#0d0d0d",
                     },
                     particles: {
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#ffffff", "#ff0000"],
+                                    value: ["#f0f0f0", "#ff0000"],
                                 },
                                 enable: true,
                             },
@@ -17318,7 +17458,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#ffffff", "#000000"],
+                                    value: ["#f0f0f0", "#1a1a1a"],
                                 },
                                 enable: true,
                             },
@@ -17336,7 +17476,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#000000", "#0000ff"],
+                                    value: ["#1a1a1a", "#0000ff"],
                                 },
                                 enable: true,
                             },
@@ -17354,7 +17494,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#ffffff", "#00ff00"],
+                                    value: ["#f0f0f0", "#00ff00"],
                                 },
                                 enable: true,
                             },
@@ -17372,7 +17512,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#000000", "#ff0000"],
+                                    value: ["#1a1a1a", "#ff0000"],
                                 },
                                 enable: true,
                             },
@@ -17390,7 +17530,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#000000", "#ff00ff"],
+                                    value: ["#1a1a1a", "#ff00ff"],
                                 },
                                 enable: true,
                             },
@@ -17408,7 +17548,7 @@
                         paint: {
                             fill: {
                                 color: {
-                                    value: ["#ffffff", "#000000"],
+                                    value: ["#f0f0f0", "#1a1a1a"],
                                 },
                                 enable: true,
                             },
@@ -17472,7 +17612,7 @@
         key: "tilt",
         name: "Tilt",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             bounce: {
@@ -17570,7 +17710,7 @@
         key: "trails",
         name: "Trails",
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         emitters: {
             position: {
@@ -17664,7 +17804,7 @@
         },
         trail: {
             enable: true,
-            fill: { color: "#000000" },
+            fill: { color: "#121212" },
             length: 20,
         },
     };
@@ -17673,7 +17813,7 @@
         key: "trailsImage",
         name: "Trails Image",
         background: {
-            color: "#ffffff",
+            color: "#f5f7fa",
             image: "url('https://particles.js.org/images/hdr/background3.jpg')",
             position: "50% 50%",
             repeat: "no-repeat",
@@ -17719,7 +17859,7 @@
             links: {
                 enable: false,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -17840,7 +17980,7 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
     };
 
@@ -17853,7 +17993,7 @@
             },
             paint: {
                 color: {
-                    value: "#ffffff",
+                    value: "#f0f0f0",
                 },
             },
             shape: {
@@ -17882,12 +18022,12 @@
             },
         },
         background: {
-            color: "#000",
+            color: "#0d0d0d",
         },
         trail: {
             enable: true,
             fill: {
-                color: "#000000",
+                color: "#121212",
             },
             length: 3,
         },
@@ -17975,7 +18115,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -18066,7 +18206,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -18098,7 +18238,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 opacity: 0.4,
                 width: 1,
             },
@@ -18163,7 +18303,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -18276,7 +18416,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#ffffff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -18293,7 +18433,7 @@
             links: {
                 enable: true,
                 distance: 150,
-                color: "#ffffff",
+                color: "#f0f0f0",
                 warp: true,
                 opacity: 1,
                 width: 1,
@@ -18314,7 +18454,7 @@
         key: "wobble",
         name: "Wobble",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             bounce: {
@@ -18459,7 +18599,7 @@
         key: "wobbleBig",
         name: "Wobble Big",
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
         particles: {
             bounce: {
@@ -18654,7 +18794,7 @@
             paint: {
                 fill: {
                     color: {
-                        value: "#fff",
+                        value: "#f0f0f0",
                     },
                     enable: true,
                 },
@@ -18697,7 +18837,7 @@
             },
         },
         background: {
-            color: "#000000",
+            color: "#0d0d0d",
         },
     };