Hey, I want to access

MaterialTheme.colors.background

inside my

transitionDefinition

but I as this function is not marked with

@Composable

I am getting this error

@Composable invocations can only happen from the context of a @Composable function

Is the

transitionDefinition

function made non-composable on purpose? How can I make access these values inside

transitionDefinition

? My use case is to have different values for light and dark theme. Something like this…

private val SomeTransitionDefinition = transitionDefinition<SomeState> {
    state(SomeState.State1) {
        this[backgroundColor] = if (MaterialTheme.colors.isLight) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
    }
}

In this case, you'll need to create the TransitionDefinition in a composable and remember it.

val color = if (MaterialTheme.colors.isLight) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
val SomeTransitionDefinition = remember(color) { 
transitionDefinition<SomeState> {
    state(SomeState.State1) {
        this[backgroundColor] = color
    }
}
}

Can we make two different `TransitionDefinition`s for Light and Dark theme, and use them inside of my composable depending on the theme? Which approach is better and clean?

You could make two `TransitionDefinition`s, it's an entirely valid approach. 🙂 But given the frequency of light/dark theme change, I'd re-create a

TransitionDefinition

when the theme changes.

Ohh, got it. Thanks @Doris Liu :)