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.
├── a│ └── animation.json└── t └── dark.json
@Composablefun ThemeExample() { val themeName = if (isSystemInDarkTheme()) "dark" else null
DotLottieAnimation( source = DotLottieSource.Asset("theming_example.lottie"), autoplay = true, themeId = themeName, loop = true, )}
Setting theme using the Controller API
@Composablefun 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() }}