dotLottie Web Player Theming

The dotLottie Web Player provides comprehensive support for dynamic theming, allowing you to modify animation colors and styles at runtime without modifying the original animation.

Basic Usage

CodePen↗

Loading Themes

Load a theme by its ID when creating the animation:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "themed-animation.lottie",
  themeId: "dark-mode",
  autoplay: true,
});

Or switch themes after initialization:

// Load theme by ID
dotLottie.setTheme("light-mode");

// Load theme from data
dotLottie.setThemeData(themeData);

// Reset to default theme
dotLottie.resetTheme();

Theme State

Monitor the current theme:

// Get current theme ID
console.log(dotLottie.activeThemeId);

Implementation Examples

Theme Switcher

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "themed.lottie",
  autoplay: true,
});

// Create theme switcher
dotLottie.addEventListener("load", () => {
  const themes = ["light", "dark", "custom"];

  themes.forEach((themeId) => {
    const button = document.createElement("button");
    button.textContent = themeId;
    button.onclick = () => dotLottie.setTheme(themeId);
    document.body.appendChild(button);
  });
});

System Theme Sync

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "themed.lottie",
  autoplay: true,
});

// Sync with system theme
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

function updateTheme(e) {
  dotLottie.setTheme(e.matches ? "dark" : "light");
}

mediaQuery.addListener(updateTheme);
updateTheme(mediaQuery);

Dynamic Theme Data

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "themed.lottie",
  autoplay: true,
});

// Apply custom theme data
const customTheme = {
  // Theme data structure
  colors: {
    primary: "#FF0000",
    secondary: "#00FF00",
  },
  // ... other theme properties
};

dotLottie.setThemeData(JSON.stringify(customTheme));

Best Practices

Theme Management
- Initialize themes after animation load
- Handle theme loading errors
- Provide fallback themes
- Cache commonly used themes
Performance
- Minimize theme switches
- Optimize theme data size
- Consider animation complexity when switching themes
User Experience
- Provide smooth theme transitions
- Maintain consistent theme states
- Handle theme loading states
- Support system theme preferences

Creating Themes

For information about creating themes for your dotLottie animations, visit dotlottie.io↗ or use the Lottie Creator↗ tool.