¿Cómo cambiar el color y el fondo en react-tsparticles? Esta es mi partícula-config.js
const particlesConfig = { background: { color: { value: "#232741", }, position: "50% 50%", repeat: "no-repeat", size: "20%", }, fullScreen: { zIndex: 1, }, interactivity: { events: { onClick: { enable: true, mode: "repulse", }, onHover: { enable: true, mode: "bubble", }, }, modes: { bubble: { distance: 250, duration: 2, opacity: 0, size: 0, }, grab: { distance: 400, }, repulse: { distance: 400, }, }, }, particles: { color: { value: "#ffffff", }, links: { color: { value: "#ffffff", }, distance: 150, opacity: 0.4, }, move: { attract: { rotate: { x: 600, y: 600, }, }, enable: true, outModes: { bottom: "out", left: "out", right: "out", top: "out", }, random: true, speed: 1, }, number: { density: { enable: true, }, value: 160, }, opacity: { random: { enable: true, }, value: { min: 0, max: 1, }, animation: { enable: true, speed: 1, minimumValue: 0, }, }, size: { random: { enable: true, }, value: { min: 1, max: 3, }, animation: { speed: 4, minimumValue: 0.3, }, }, }, }; export default particlesConfig;datos ficticios "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Para cambiar el color de partículas y de fondo, debe ajustar los valores a continuación respectivamente (con colores de código hexadecimal) en su configuración. También incluí links (los que están entre los puntos) ya que también puedes ajustar su color
particles: { color: { value: "#a13f23", }, links: { color: "#098712", } } background: { color: { value: "#121", } }Para cambiar la altura del componente del lienzo, debe agregar otro campo al objeto de opciones:
fullScreen: false Una vez hecho esto, debe apuntar a la identificación de tsparticles y agregar el atributo de height con un valor que se ajuste a sus necesidades, ejemplo a continuación:
#tsparticles { height: 100px }Aquí está Sandbox para probar.