react-tsparticles change color on click of component i made for dark mode

user_13496664 0
Viewed 289

i Want to change theme of the react-tsparticle

function Particle() {
  const particlesInit = (main) => {};
  const particlesLoaded = (container) => {
    <DarkMode />;
    container.loadTheme("dark"); //dark mode
  };
////////////////////////

themes: [
          {
            name: "light",
            default: {
              value: true,
              mode: "light",
            },
            options: {
              background: {
                color: "transparent",
              },
              particles: {
                color: {
                  value: "#20f0",
                },
              },
            },
          },
          {
            name: "dark",
            default: {
              value: true,
              mode: "dark",
            },
            options: {
              background: {
                color: "transparent",
              },
              particles: {
                color: {
                  value: "#2fff",
                },
              },
            },
          },

in container.loadtheme("dark/light)" can be set so i want to set a onclick on the dark mode button so that dark and light can be set by on click on this container

<DarkMode />; //want onclick on this This is the button which i imported and i want this button to change the particle theme

const DarkMode = () => {
  return (
    <div className="toggle-theme-wrapper">
      <span>☀️</span>
      <label className="toggle-theme" htmlFor="checkbox">
        <input
          type="checkbox"
          id="checkbox"
          onChange={toggleTheme}

const toggleTheme: ChangeEventHandler<HTMLInputElement> = (e) => {
  if (e.target.checked) {
    setDark();
  } else {
    setLight();
  }
};
typescript reactjs
1 Answers

You can find how to get the container on GitHub here

import Particles from "react-tsparticles";

const App = () => {
  const particlesInit = (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
  };

  const particlesLoaded = (container) => {
    console.log(container);
  };

  return (
    <Particles id="tsparticles" url="http://foo.bar/particles.json" init={particlesInit} loaded={particlesLoaded} />
  );
};

In the particlesLoaded function you can store the container in a local variable (or state) and use that to call the loadTheme function

user_16161640
Related