<h1>dotLottie Web (Theming Example)</h1>
<label>Themes:
<select id="themes-selector">
  <option value="" selected>None</option>
</select>
</label>
<a href="https://github.com/lottiefiles/dotlottie-web" target="_blank">
  <canvas id="dotLottie-canvas">
  </canvas>
</a>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

canvas {
  width: 350px;
  height: 350px;
}

import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web@0.37.0";

const canvas = document.querySelector("#dotLottie-canvas");
const themesSelector = document.querySelector("#themes-selector");

const src = "https://lottie.host/9a5a6605-fc90-4935-8d10-9df4c83902ff/PFUKH53LJk.lottie";

const dotLottie = new DotLottie({
  canvas,
  src,
  loop: true,
  autoplay: true
});

themesSelector.addEventListener("change", () => {
  const themeId = themesSelector.value;

  if (themeId) {
    dotLottie.setTheme(themeId);
  } else {
    dotLottie.resetTheme();
  }
});


dotLottie.addEventListener("load", () => {
  const themes = dotLottie.manifest?.themes || [];

  themesSelector.innerHTML = "";

  const noneOption = document.createElement("option");
  noneOption.value = "";
  noneOption.textContent = "None";
  noneOption.selected;

  themesSelector.appendChild(noneOption);

  for (const theme of themes) {
    const option = document.createElement("option");
    option.textContent = theme.id;
    option.value = theme.id;

    themesSelector.appendChild(option);
  }
});