Color Slots let you define reusable colors, keep your animation consistent, and update everything in one place. They also act as the foundation for building multi-theme animations such as light mode, dark mode, or brand variations.

This guide covers how Color Slots work in Lottie Creator, how to link them to your layers, and how to use Themes to create flexible, scalable color systems.

What Are Color Slots?

Color Slots are named color variables you can reuse across your animation.

Instead of applying colors manually to each shape or layer, you define a slot like Primary, Accent, or Background, and link properties to it.

When the slot changes, every linked property updates instantly.

Example

You create a slot called Primary.

You link it to:

• •A button fill
• •An icon stroke
• •A gradient stop
• •A text color

When you change Primary, all those colors update together — no manual editing.

Why Use Color Slots?

Consistent Colors

All linked elements always stay in sync.

Faster Updates

Update a slot once instead of editing every layer.

Easy Theming

Themes override slot values, making multi-theme animations possible.

Cleaner Projects

Naming slots clarifies how colors are being used.

How to Create a Color Slot

1. Open Theme Manager or the Color Slots panel

2. Click Create Slot

3. Give your slot a name

   • •Examples: Primary, Background Light, Text, Accent

4. Choose a starting color

Your slot now appears in the Color Slot list and can be used anywhere in the animation.

Best Practices for Naming Slots

Good names describe the purpose, not the exact color.

Linking Properties to Slots

You can link any color property to a slot:

• •Shape fills
• •Shape strokes
• •Gradient stops
• •Image tint (if supported)
• •Text fill (for text layers)

How to link:

1. Select a layer

2. Click the color swatch in the properties panel

3. Choose Link to Slot

4. Pick the slot you want to use

Linked properties will now display the slot name instead of a direct color value.

Updating Color Slots

Changing a slot is simple:

1. Open Theme Manager

2. Select your slot

3. Choose a new color

All linked fills, strokes, and gradients update instantly across the entire scene.

Unlinking a Property

If one layer needs a unique color:

1. Open the property’s color picker

2. Click Unlink

3. The property reverts to a direct color value

4. Future slot changes won’t affect it

Using Themes

Themes let you define different color values for the same color slots.

This makes it easy to create:

• •Light and dark mode
• •Seasonal variations
• •Brand variations
• •A/B test color schemes

Themes do not change your layers

They only change the values assigned to each slot.

How Themes Work

Every theme sets its own color for each slot.

For example:

Slot: Primary

Switching themes updates all slot-linked properties automatically.

Creating Themes

1. Open Theme Manager

2. Click New Theme

3. Name your theme

4. Define colors for each slot

5. Switch between themes to preview differences

Typical projects use 2–3 themes:

• •Light
• •Dark
• •Brand variation

Previewing Themes

Apply any theme from Theme Manager to instantly:

• •Switch all slot colors
• •Preview the animation with that theme
• •Compare visual differences

Your canvas updates in real time.

Exporting Themed Animations

Themes are supported only in dotLottie (.lottie) format.

When exporting:

1. Choose dotLottie

2. Enable Include Themes

3. Select which themes to embed

4. Choose a default theme (fallback for older players)

The exported file contains:

• •Your animation
• •All defined themes
• •All slot values per theme

A modern dotLottie player can switch themes at runtime.

Using Themes in Code

Developers can select or switch themes using dotLottie-compatible players, for example:

<dotlottie-playersrc="animation.lottie"
  theme="dark"
  autoplay
  loop
></dotlottie-player>

Switching theme at runtime:

player.setTheme("light");

(The exact API may vary by player.)

When to Use Color Slots vs Direct Colors

Use Color Slots for:

• •Anything that repeats (buttons, icons, surfaces)
• •Colors that might change
• •Light and dark mode
• •Brand color customization

Use direct colors for:

• •One-off decorative elements
• •Artwork that shouldn’t change across themes