Apply themes at runtime
Load and switch themes packaged in .lottie files, apply custom theme data, and sync animation colors with the user's system theme.
Themes let you restyle an animation at runtime — colors, styles, whole light/dark variants — without modifying the animation file. Themes are packaged inside the .lottie file and applied by ID, or supplied as raw theme data.
Apply a theme
Set the initial theme when constructing the player:
const dotLottie = new DotLottie({
canvas: document.querySelector("#canvas"),
src: "themed-animation.lottie",
themeId: "dark-mode",
autoplay: true,
});Or switch themes after initialization:
// Load theme by ID
dotLottie.setTheme("light-mode");
// Load theme from data
dotLottie.setThemeData(themeData);
// Reset to default theme
dotLottie.resetTheme();To check which theme is active, read activeThemeId:
// Get current theme ID
console.log(dotLottie.activeThemeId);Build a theme switcher
Apply themes after the animation has loaded, and handle the case where a theme fails to apply — setTheme returns false on failure, so you can fall back to a default:
const dotLottie = new DotLottie({
canvas: document.querySelector("#canvas"),
src: "themed.lottie",
autoplay: true,
});
// Create theme switcher
dotLottie.addEventListener("load", () => {
const themes = ["light", "dark", "custom"];
themes.forEach((themeId) => {
const button = document.createElement("button");
button.textContent = themeId;
button.onclick = () => dotLottie.setTheme(themeId);
document.body.appendChild(button);
});
});Sync with the system theme
Follow the user's prefers-color-scheme setting and switch whenever it changes:
const dotLottie = new DotLottie({
canvas: document.querySelector("#canvas"),
src: "themed.lottie",
autoplay: true,
});
// Sync with system theme
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
function updateTheme(e) {
dotLottie.setTheme(e.matches ? "dark" : "light");
}
mediaQuery.addListener(updateTheme);
updateTheme(mediaQuery);Apply custom theme data
If the theme isn't packaged in the file, pass theme data directly as a string:
const dotLottie = new DotLottie({
canvas: document.querySelector("#canvas"),
src: "themed.lottie",
autoplay: true,
});
// Apply custom theme data
const customTheme = {
// Theme data structure
colors: {
primary: "#FF0000",
secondary: "#00FF00",
},
// ... other theme properties
};
dotLottie.setThemeData(JSON.stringify(customTheme));Keep theme data small and minimize how often you switch — every switch restyles the animation. If you only need to change individual properties rather than whole themes, use slots instead.
Create themes
To author themes for your dotLottie animations, visit dotlottie.io↗ or use the Lottie Creator↗ tool.
Related
Override properties with slots for per-property runtime overrides
How the web player works — how themes and slots relate
API Reference for the theme methods