Theme enabled exports allow your animation to support multiple color themes, runtime theme switching, and dynamic styling across web, iOS, Android, and all platforms that support the Lottie and dotLottie specification. This doc covers everything you need to know to prepare, configure, and export dotLottie files with built in theme metadata.

1. What Are Theme Enabled dotLottie Files

A dotLottie (.lottie) file is:

•A compressed animation package
•
A single file that contains:
- •Lottie JSON
- •Themes (color metadata)
- •State machines (if any)
- •Images
- •Manifest and metadata

When you export a theme enabled dotLottie, all themes you’ve created in Lottie Creator are embedded inside the .lottie container, allowing runtime theme switching without re exporting the animation.

Supported platforms for theme switching:

•Web (Lottie Web + dotLottie player)
•iOS + Android (Lottie Mobile with dotLottie runtime)
•React and Web Components
•Any platform that supports the dotLottie specification

2. Prerequisites Before Exporting

Before exporting with theme support:

Make sure:

All color slots are correctly assigned
All color changes rely on slots, not raw colors
No layers use mixed direct color + slots
Gradients use slot-to-slot color stops
Theme Manager has:
- •Correct theme names
- •A default theme (top of the list)
- •All variants ordered logically
Clean color slot usage ensures perfect runtime theme behavior.

3. Exporting from Lottie Creator

Lottie Creator exports through the LottieFiles Download & Handoff panel.

How to export a theme enabled dotLottie:

Click Export in the Lottie Creator header
You are redirected to LottieFiles Export / Handoff
In the Export panel, choose dotLottie (.lottie)
Enable Themes
Choose which themes to include:
- •Default theme
- •Additional themes
- •All themes
Click Download or Save to Workspace

Themes are packaged into the .lottie file along with the animation.

4. Theme Options in the Export Panel

The LottieFiles Handoff panel shows all theme related export settings.

You can configure:

✓ Default Theme

Automatically set based on the top theme in your Lottie Creator Theme Manager.

✓ Additional Themes

Include all or select themes for export.

✓ Theme Metadata

Embedded into the file for runtime switching.

✓ Optimize for Size

Optional: compress JSON + theme data for smaller output.

✓ Save to LottieFiles Workspace

Stores the .lottie file with all themes for easy CDN delivery.

5. Exporting for Different Use Cases

A. Multi Theme Product Animations (Recommended)

•Export a single .lottie
•Include all themes
•Developers switch themes at runtime

Perfect for:

•Dark mode / Light mode
•Brand variants
•White label products

•Export separate .lottie or .json for each visual variant
•Themes still available but not always necessary
•Use GIF/MP4 for social platforms

C. UI / Microinteractions

•Embed one .lottie with multiple themes
•Switch themes with JS or native code
•Reduces number of animation files dramatically

D. Developer Handoff

•Save to Workspace
•Use CDN link
•
Developers choose theme via:
- •JavaScript API
- •dotLottie Player attributes
- •Mobile Lottie APIs

6. CDN Delivery With Theme Support

LottieFiles CDN fully supports theme switching for .lottie files.

After exporting and saving to your workspace:

Open your file in LottieFiles
Go to the Handoff tab
Enable Hosted URL
Choose .lottie as the hosted format
Copy the CDN URL

Theme switching options via CDN:

Web Player (dotLottie Player)

<dotlottie-playersrc="https://lottiefiles.com/cdn-url-here.lottie"
  theme="Dark"
  autoplay
></dotlottie-player>

Switch theme programmatically:

player.setTheme("BrandA");

iOS

let animation = try DotLottieFile(named: "themeFile")
animation.setTheme("Dark")

Android

dotLottie.setTheme("Dark")

Theme switching works instantly and does not require a new export.

7. What Gets Embedded Into a Theme Enabled Export

A .lottie export includes:

✔ Primary Animation

The main Lottie JSON.

✔ All Enabled Themes

Each theme includes:

•Color slot definitions
•Slot name/value pairs
•Gradient metadata
•Manifest linking to animation

✔ State Machines (if present)

Transitions, inputs, and triggers.

✔ Image Assets

Compressed and embedded.

✔ Metadata + Manifest

Defines themes, states, and animation entrypoints.

Nothing extra needs to be configured manually — Lottie Creator does this automatically.

8. Limitations to Be Aware Of

Direct colors do not theme

If a fill/stroke uses a direct HEX value instead of a slot, theme switching WILL NOT affect it.

Theme switching works only with `.lottie`

Lottie JSON does not support embedded themes.

Gradient slots must have consistent slot usage

Mixed stops may cause incorrect runtime colors.

Older Lottie players may not support themes

Theme enabled dotLottie requires:

•dotLottie-player
•Modern Lottie Mobile SDKs
•LottieFiles integration

CDN theme switching requires a theme enabled `.lottie`

JSON-only CDN files cannot switch themes.

9. Recommended Workflow for Theme Exports

1. Link colors to slots early

Avoid retrofitting themes later.

2. Create all themes before exporting

Ensures consistent slot structures.

3. Reorder themes before export

The top theme = default.

4. Choose dotLottie for production builds

JSON is fine for simple previews, but not theming.

5. Use CDN for dynamic theme switching

One animation file → multiple visual appearances.

Exporting Themes