# Using themes and motion tokens
Switch dotLottie themes and test motion-token values in a live VS Code preview.

Themes and motion tokens let one `.lottie` adapt without duplicating the complete animation. Use the extension to verify those variations before writing runtime logic.

<Image src="https://assets.docs.lottiefiles.com/static/a81ed8b14b-640.webp" alt="Lottie preview with a motion-token panel for switching and editing theme values" caption="Switch themes and test token values against the live animation" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/a81ed8b14b-640.webp 640w, https://assets.docs.lottiefiles.com/static/a81ed8b14b-1024.webp 1024w" width="1376" height="870" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAiklEQVR4nB2NuxKCMADA+h8OCFRsKx4Mng4oIK9WT6GM+P//EQ+2ZMhF9H6h7kcaN/MYvjydp3ae0o609oO4VB2lvnLPb+yCgK54kqUZQRix5AqxVlEUE8cSk57Zh3LzlWUsEUX7xugEpRXJUWOUQcoDRhuyk0YM/kdjp+1b2YnmNVPZkdpOtG7kDzuMQhflT9KcAAAAAElFTkSuQmCC" />

## Themes vs motion tokens

- A **theme** is a named set of slot values stored in the dotLottie manifest.
- A **motion token** or **slot** exposes a specific animation value that a theme or runtime can override.

Both require `.lottie`; plain Lottie JSON does not preserve manifest themes or slot definitions.

## Switch a theme

1. Open a `.lottie` that contains themes.
2. Expand **Motion Tokens** or **Theme**.
3. Choose a manifest theme or preset.
4. Play the animation and inspect every affected state.

Use reset to return to the default theme.

## Edit slot values

The panel can expose supported values such as:

- Solid colors and gradients.
- Scalars and vectors.
- Text and typography values.
- Animated slot values at existing keyframes.

Image slots are read-only. For animated values, the extension changes values at existing keyframes; it does not edit their timing, easing, or hold behavior.

## Export or copy theme data

Some preview contexts expose theme-data export or a runtime `setThemeData` example. Use those actions only when they appear for the current file. Otherwise, preserve the `.lottie` and generate runtime code from the Code Snippet panel.

## Authoring changes

VS Code is useful for testing and developer handoff. Use Lottie Creator to add new slots, change slot binding, author themes, or edit animated token timing.

## Related

- [Generating integration code](/en/integrations/vscode/05_integrate/generating-integration-code)
- [Choosing an output format](/en/integrations/vscode/05_integrate/choosing-an-output-format)
- [Lottie Creator documentation](/en/creator)