Managing Themes

Themes let a single .lottie package carry multiple visual variations (color palettes, property overrides) that a player can apply at runtime.

Adding a theme

dotlottie.addTheme("dark", "Dark Theme", JSON.stringify({ rules: [] }));

• id — a unique identifier for this theme within the package

• name — an optional human-readable display name; pass null to omit it

• jsonData — the theme data as a Buffer or JSON string, with a { rules: [...] } shape

Associating a theme with an animation

Set a theme as an animation's default via initialTheme, or list several as available via themes, when calling addAnimation:

dotlottie.addAnimation("hero", heroBuffer, {
  initialTheme: "dark",
  themes: ["dark", "light"],
});

Removing and reading themes

dotlottie.removeTheme("dark"); // throws if not found
dotlottie.getThemeJson("dark"); // → string | null
dotlottie.themeIds(); // → string[]

Finding which animations use a theme

dotlottie.animationsUsingTheme("dark"); // → string[]

See Querying Relationships for more cross-reference queries like this one.

Next up: Managing State Machines