Theming

How to use theming with the player-component

1. Creating a dotLottie with themes using dotlottie-js

Full dotlottie-js theming documentation is avalaible here.

After installing dotlottie-js you can create and assign themes to animations: const dotlottie = new DotLottie();

const dotlottie = new DotLottie();
const themeData = "
  FillShape {
    fill-color: red;
  }
";
      
await dotlottie
  .setAuthor('John')
  .setVersion('1.0')
  .addAnimation({
    id: 'lottie1',
    data: animationData,
  })
  // We add the theme
  .addTheme({
    id: 'light-theme',
    data: themeData,
  })
  // We assign the theme to an animation using the animationId
  .assignTheme({
    animationId: 'lottie1',
    themeId: 'light-theme',
  })
  .build();

await dotlottie.download(fileName);

The result is a .lottie file containing a themes folder and a .lss file containing your theme data.

2. Finding the theme names inside your .lottie

<dotlottie-player id="dotlottie-player" src="animation.lottie" />

let player = document.getElementById('dotlottie-player');

player.addEventListener('ready', () => {
    console.log(player.getManifest().themes);
});

You can then save the themes or just use the ids directly outputted.

3. Using the player-component with themes

Using the 'defaultTheme' prop

<dotlottie-player src="cat.lottie" defaultTheme="light-theme" />

Using the defaultTheme prop will assign the theme to the first loaded animation.

Using the 'setTheme' method

You can manually set and change the active theme applied to your animation using the setTheme(theme: string) method:

<dotlottie-player id="dotlottie-player" src="animation.lottie" />

let player = document.getElementById('dotlottie-player');

player.setTheme('darkmode');