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

Jetpack Compose

@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()
    }
}

Traditional UI

For traditional Android Views, you can control themes using the DotLottieAnimation view:

// Set theme by ID from .lottie file manifest
dotLottieAnimationView.setTheme("theme_id")


// Set theme from JSON data
dotLottieAnimationView.setThemeData(themeJsonData)


// Reset theme to default
dotLottieAnimationView.resetTheme()


// Set slot data for dynamic content
dotLottieAnimationView.setSlots(slotsJsonData)

Advanced Theming Features

Theme Data from JSON

You can also set themes directly from JSON data instead of using theme IDs:

val themeJsonData = """
{
  "id": "custom_theme",
  "colors": [
    {
      "keypath": "**.Fill 1.Color",
      "value": [1, 0, 0] // RGB values for red
    }
  ]
}
"""


// For Jetpack Compose
dotLottieController.setThemeData(themeJsonData)


// For traditional UI
dotLottieAnimationView.setThemeData(themeJsonData)

Slot Data for Dynamic Content

Slots allow you to replace content dynamically in your animations:

val slotsJsonData = """
{
  "slot1": {
    "p": "path/to/image.png"
  }
}
"""


// For Jetpack Compose
dotLottieController.setSlots(slotsJsonData)


// For traditional UI
dotLottieAnimationView.setSlots(slotsJsonData)

Initial Theme Configuration

You can set an initial theme when configuring your animation:

Traditional UI

val config = Config.Builder()
    .source(DotLottieSource.Asset("theming_example.lottie"))
    .themeId("darkTheme") // Set initial theme
    .autoplay(true)
    .loop(true)
    .build()


dotLottieAnimationView.load(config)

Jetpack Compose

DotLottieAnimation(
    source = DotLottieSource.Asset("theming_example.lottie"),
    themeId = "darkTheme", // Set initial theme
    autoplay = true,
    loop = true
)

References

API