Jetpack Compose theming at runtime - material-design

Question

I'm new to Jetpack Compose and trying to experiment with theming.
I have a theme.kt file that looks like this:
#Composable
fun AppThemeProvider(
content: #Composable () -> Unit
) = CompositionLocalProvider(
LocalColors provides Colors(),
LocalShapes provides Shapes(),
LocalTypography provides Typography(),
content = content
)
object AppTheme {
val colors: Colors #Composable get() = LocalColors.current
val shapes: Shapes #Composable get() = LocalShapes.current
val typography: Typography #Composable get() = LocalTypography.current
}
And 3 classes for each provided values: Colors.kt, Shapes.kt and Typography.kt
This is my Colors class (The other 2 are basically the same):
data class Colors(
val primary: Color = Color(0xFF00663f),
val primaryVariant: Color = Color(0xFF007265),
val onPrimary: Color = Color(0xFFFFFFFF),
val secondary: Color = Color(0xFFFFFFFF),
val secondaryVariant: Color = Color(0xFFFFFFFF),
val onSecondary: Color = Color(0xFFFFFFFF),
val background: Color = Color(0xFFFFFFFF),
val surface: Color = Color(0xFFFFFFFF),
val error: Color = Color(0xFFBF0013),
val onBackground: Color = Color(0xFF3E3E3E),
val onError: Color = Color(0xFFFFFFFF),
)
val LocalColors = staticCompositionLocalOf { Colors() }
val colors: Colors
#Composable
#ReadOnlyComposable
get() = LocalColors.current
Now, I have an API that I call during the splash screen that returns my theme as a JSON structure.
I'd like to use such response to build my 3 values classes to have a 'built-at-runtime' theme.
Is it possible to achieve this behaviour?

Answer 1

Yes it is possible. You can pass the Colors as a parameter to your AppThemeProvider composable and when the colors changes then the theme of your up will be updated.
Simple example:
var colors by remember { mutableStateOf(Colors()) }
LaunchedEffect(Unit) {
colors = downloadColorsFromAPI()
}
AppThemeProvider(colors = colors) {
App()
}
and your AppThemeProvider becomes:
#Composable
fun AppThemeProvider(
colors: Colors = Colors(),
content: #Composable () -> Unit
) = CompositionLocalProvider(
LocalColors provides colors,
LocalShapes provides Shapes(),
LocalTypography provides Typography(),
content = content
)