Hey, I want to access `MaterialTheme.colors.background` inside my `transitionDefinition` but I as th...

# compose

[Hitanshu Dhawan]

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
    }
}

[Doris Liu]

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
    }
}
}

[Hitanshu Dhawan]

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?

[Doris Liu]

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.

[Hitanshu Dhawan]

Ohh, got it. Thanks @Doris Liu :)