Working with themes

You can grab the all available themes from manifest when the player is ready. And then use it to apply it to the animation as shown below.

import type { DotLottieRefProps, ManifestTheme } from "@dotlottie/react-player";
import { DotLottiePlayer, Controls, PlayerEvents } from "@dotlottie/react-player";
import { useRef, useState } from "react";

import "@dotlottie/react-player/dist/index.css";

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();
  const [themes, setThemes] = useState<ManifestTheme[]>();

  return (
    <div style={{ background: 'red'}}>
      {Array.isArray(themes) && (
        <select onChange={(event): void => lottieRef.current?.setDefaultTheme(event.target.value)}>
          <option value="">Please select a theme</option>
          {themes.map((theme) => {
            return (
              <option key={theme.id} value={theme.id}>
                Apply {theme.id}
              </option>
            );
          })}
        </select>
      )}
      <DotLottiePlayer
        lottieRef={lottieRef}
        style={{ height: "500px" }}
        src="https://lottie.host/c7029f2f-d015-4d88-93f6-7693bf88692b/d7j8UjWsGt.lottie"
        autoplay
        loop
        onEvent={(event):void => {
          if (event === PlayerEvents.Ready) {
            setThemes(lottieRef.current?.getManifest()?.themes);
          }
        }}
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
}