<!-- tsParticles container -->
<div id="tsparticles"></div>
<div id="theme-buttons">
  <div class="row">
    <div class="col text-center">
      <h4>Themes</h4>
      <h6>Try changing device theme and reload the page</h6>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-block btn-light" id="light">Light</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-block btn-dark" id="dark">Dark</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-block btn-danger" id="red">Red</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-block btn-success" id="green">Green</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-block btn-primary" id="blue">Blue</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-block btn-warning" id="yellow">Yellow</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-block btn-info" id="cyan">Cyan</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-block btn-secondary" id="grey">Grey</button>
    </div>
  </div>
</div>
<!-- https://github.com/matteobruni/tsparticles -->
<div class="github">
  <a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
    <img class="img-fluid" id="gh-mark" src="https://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
    <span id="gh-project">Made with tsParticles</span>
  </a>
  <div>
    <a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" data-show-count="true" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>
    <a class="github-button" href="https://github.com/matteobruni/tsparticles/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
    <a class="github-button" href="https://github.com/matteobruni/tsparticles/releases/tag/tsparticles%401.34.0" data-icon="octicon-download" aria-label="Download matteobruni/tsparticles on GitHub">Download</a>
  </div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
/* ---- reset ---- */
body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }

  #theme-buttons {
    background-color: #333333cc !important;
  }
}

canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
  position: fixed;
  width: 100%;
  height: 100%;
}

#theme-buttons {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 20px;
  background: #cccccccc;
  border-radius: 10px;
}

#theme-buttons div.row:first-child {
  margin-top: 0px;
}

#theme-buttons div.row {
  margin-top: 10px;
}

#theme-buttons button:first-child {
  margin-left: 0px;
}

#theme-buttons button {
  margin-left: 10px;
}

.github {
  bottom: 10px;
  right: 10px;
  position: fixed;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px 6px 12px;
  border: 1px solid #000;
}

.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
  color: #000;
  text-decoration: none;
}

.github img {
  height: 30px;
}

.github #gh-project {
  font-size: 20px;
  padding-left: 5px;
  font-weight: bold;
  vertical-align: bottom;
}
let themeableContainer;

tsParticles
  .load("tsparticles", {
    themes: [
      {
        name: "light",
        default: {
          value: true,
          mode: "light"
        },
        options: {
          background: {
            color: "#ffffff"
          },
          particles: {
            color: {
              value: ["#000000", "#0000ff"]
            }
          }
        }
      },
      {
        name: "dark",
        default: {
          value: true,
          mode: "dark"
        },
        options: {
          background: {
            color: "#000000"
          },
          particles: {
            color: {
              value: ["#ffffff", "#ff0000"]
            }
          }
        }
      },
      {
        name: "red",
        options: {
          background: {
            color: "#ff0000"
          },
          particles: {
            color: {
              value: ["#ffffff", "#000000"]
            }
          }
        }
      },
      {
        name: "green",
        options: {
          background: {
            color: "#00ff00"
          },
          particles: {
            color: {
              value: ["#000000", "#0000ff"]
            }
          }
        }
      },
      {
        name: "blue",
        options: {
          background: {
            color: "#0000ff"
          },
          particles: {
            color: {
              value: ["#ffffff", "#00ff00"]
            }
          }
        }
      },
      {
        name: "yellow",
        options: {
          background: {
            color: "#ffff00"
          },
          particles: {
            color: {
              value: ["#000000", "#ff0000"]
            }
          }
        }
      },
      {
        name: "cyan",
        options: {
          background: {
            color: "#00ffff"
          },
          particles: {
            color: {
              value: ["#000000", "#ff00ff"]
            }
          }
        }
      },
      {
        name: "grey",
        options: {
          background: {
            color: "#777777"
          },
          particles: {
            color: {
              value: ["#ffffff", "#000000"]
            }
          }
        }
      }
    ],
    fpsLimit: 60,
    particles: {
      number: {
        value: 30,
        density: {
          enable: true,
          value_area: 800
        }
      },
      shape: {
        type: ["circle", "square"]
      },
      opacity: {
        value: 1
      },
      size: {
        value: 30,
        random: {
          enable: true,
          minimumValue: 15
        }
      },
      rotate: {
        value: 0,
        direction: "random",
        animation: {
          speed: 5,
          enable: true
        }
      },
      move: {
        enable: true,
        speed: 6,
        direction: "none",
        out_mode: "out"
      }
    },
    interactivity: {
      detectsOn: "canvas",
      events: {
        onHover: {
          enable: true,
          mode: "repulse"
        },
        onClick: {
          enable: true,
          mode: "push"
        },
        resize: true
      }
    },
    detectRetina: true
  })
  .then((container) => {
    themeableContainer = container;
    themeableContainer.canvas.initBackground();
    console.log(themeableContainer.actualOptions);
  });

document.querySelector("#light").addEventListener("click", () => {
  themeableContainer.loadTheme("light");
});

document.querySelector("#dark").addEventListener("click", () => {
  themeableContainer.loadTheme("dark");
});

document.querySelector("#red").addEventListener("click", () => {
  themeableContainer.loadTheme("red");
});

document.querySelector("#green").addEventListener("click", () => {
  themeableContainer.loadTheme("green");
});

document.querySelector("#blue").addEventListener("click", () => {
  themeableContainer.loadTheme("blue");
});

document.querySelector("#yellow").addEventListener("click", () => {
  themeableContainer.loadTheme("yellow");
});

document.querySelector("#cyan").addEventListener("click", () => {
  themeableContainer.loadTheme("cyan");
});

document.querySelector("#grey").addEventListener("click", () => {
  themeableContainer.loadTheme("grey");
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/tsparticles@1.30.1/tsparticles.min.js