Theming

Adding themes to your Lottie animations can significantly enhance your designs, especially if you need multiple visual styles of a single animation. This step-by-step guide will show you how to integrate Lottie Theming into your Lottie animations using Lottie Creator.

Using themes in your dotLottie animations

theming_example.lottie contains 1 theme named "dark". We can sync the theme with the system theme by passing the themeId as null when the system theme is light and "dark" when the system theme is dark.

theming_example.lottie
├── a
│   └── animation.json
└── t
    └── dark.json
@Composable
fun ThemeExample() {
    val themeName = if (isSystemInDarkTheme()) "dark" else null


    DotLottieAnimation(
        source = DotLottieSource.Asset("theming_example.lottie"),
        autoplay = true,
        themeId = themeName,
        loop = true,
    )
}

ThemeExample

Setting theme using the Controller API

@Composable
fun ThemeExample() {
    val dotLottieController = remember { DotLottieController() }


    DotLottieAnimation(
        source = DotLottieSource.Asset("theming_example.lottie"),
        autoplay = true,
        loop = true,
        controller = dotLottieController,
    )


    LaunchedEffect(Unit) {
        // Set the theme to dark
        dotLottieController.setTheme("dark")
        // Remove or unset the theme
        dotLottieController.resetTheme()
    }
}

References

API