static/v0/particles.js

document.addEventListener('DOMContentLoaded', async function() {
    await tsParticles.load("tsparticles", {
        fullScreen: {
            enable: false
        },
        background: {
            color: {
                value: "transparent"
            }
        },
        fpsLimit: 60,
        interactivity: {
            events: {
                onClick: {
                    enable: true,
                    mode: "push"
                },
                onHover: {
                    enable: true,
                    mode: "grab"
                },
                resize: true
            },
            modes: {
                push: {
                    quantity: 4
                },
                grab: {
                    distance: 140,
                    links: {
                        opacity: 1
                    }
                }
            }
        },
        particles: {
            color: {
                value: "#ffffff"
            },
            links: {
                color: "#ffffff",
                distance: 150,
                enable: true,
                opacity: 0.5,
                width: 1
            },
            collisions: {
                enable: true
            },
            move: {
                direction: "none",
                enable: true,
                outModes: {
                    default: "bounce"
                },
                random: false,
                speed: 2,
                straight: false
            },
            number: {
                density: {
                    enable: true,
                    area: 800
                },
                value: 80
            },
            opacity: {
                value: 0.5
            },
            shape: {
                type: "circle"
            },
            size: {
                value: { min: 1, max: 5 }
            }
        },
        detectRetina: true
    });

    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
        updateParticleColors();
    }

    function updateParticleColors() {
        const isDarkMode = document.body.classList.contains('dark-mode');
        const color = isDarkMode ? "#4299e1" : "#ffffff";
        tsParticles.domItem(0).options.particles.color.value = color;
        tsParticles.domItem(0).options.particles.links.color = color;
        tsParticles.domItem(0).refresh();
    }

    // Expose toggleDarkMode to global scope
    window.toggleDarkMode = toggleDarkMode;
});