Themes allow you to define different color variations for your animation without duplicating any work. Each theme overrides the values of your Color Slots, letting you create light mode, dark mode, brand variants, or client-specific color sets — all within one animation file.

This doc explains how to create, configure, and use themes in Lottie Creator.

What Are Themes?

A Theme is a collection of color overrides assigned to your Color Slots.

•Themes do not change your artwork structure
•Themes do not modify layers
•Themes only swap color values for linked properties

Every theme contains a set of colors for each slot:

•Slot: Primary → Light: #000000, Dark: #FFFFFF
•Slot: Accent → Light: #FF0055, Dark: #00E1FF
•Slot: Background → Light: #FFFFFF, Dark: #121212

Switching themes updates the entire canvas instantly.

Where to Create Themes

You create and manage themes in the Theme Manager panel.

How to open Theme Manager:

•Click the Theme Manager icon (right panel),
•or open via the top bar if present in your version of the interface.

Inside Theme Manager, you’ll see:

•List of available themes
•Active theme preview
•All Color Slots with color pickers
•Add / duplicate / delete theme options

This is the central hub for configuring theme behavior.

How to Create a New Theme

1. Open Theme Manager

Locate the Theme Manager in the right sidebar.

2. Create a Theme

Click:

▶️ New Theme (or Add Theme, depending on UI label)

A new blank theme appears, usually named Theme 1, Theme 2, etc.

3. Name Your Theme

Click the theme name to rename it.

Examples:

•Light
•Dark
•Brand A
•Holiday Variant
•Client Blue Version

4. Assign Colors to Slots

For each Color Slot:

Click the slot’s color swatch
Choose a color or paste a hex value
Repeat for all slots you want to override

Slots left untouched will inherit the base/default values.

Using Multiple Themes

Each theme is a fully independent color set.

Common setups:

Standard Apps

•Light
•Dark

Brand Systems

•Brand Primary
•Brand Secondary
•Partner/Client Variant

Marketing / Campaigns

•Spring
•Summer
•Holiday
•Special Edition

You can switch themes at any time to preview how your animation adapts across different visual systems.

Duplicating Themes

If you want a theme similar to an existing one:

Click a theme
Select Duplicate
Rename it
Adjust only the colors you need

This saves time when building multiple variations.

Deleting Themes

To remove a theme:

Select the theme
Click Delete

Creator will ask for confirmation to avoid accidental loss.

Theme Previewing

Switch between themes in Theme Manager to instantly preview the look and feel.

Canvas updates immediately:

•Shapes
•Fills
•Strokes
•Gradients
•Any slot-linked property

This ensures your animation remains correct across all theme variations.

Theming Best Practices

1. Always build your base theme first

Your first theme usually acts as your “default” color system.

2. Use clear, reusable Color Slots

Examples:

•Primary
•Accent
•Surface
•Text Primary
•Text Secondary

3. Do NOT assign direct colors when the color should be theme-swappable

Link them to a slot instead.

Direct colors = locked

Slot colors = theme ready

4. Use Duplicate Theme for variants

Much faster than starting from scratch.

5. Test at least 2 themes during animation

To ensure:

•No direct-color elements are left behind
•Gradients update correctly
•UI elements remain accessible (contrast)

How Themes Work with dotLottie Export

Themes are supported when exporting to dotLottie (.lottie).

When exporting:

•Pick dotLottie
•Enable Include Themes
•Select which themes to embed
•Choose a default theme

The exported file contains all themes, and any modern dotLottie player can switch themes at runtime.

Creating Themes