How to have multiple custom themes in jetpack compose?

Viewed 126

My current code is as follows:


@Composable
fun AppTheme(darkTheme: Boolean = false,
             content: @Composable() () -> Unit) {
    val colors = if (darkTheme) DarkThemeColors else LightThemeColors
    MaterialTheme(
        colors = colors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes,
    ) {
        content()
    }
}

which im calling in main activity like that:


    @Inject
    lateinit var application: WeatherApplication

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme(darkTheme = application.isDark.value) {
                WeatherApp(onToggleTheme = { application.toggleLightTheme()} )
            }

toggle light theme is basically this:
isDark.value = !isDark.value

and then im calling onClick in another screen like that:

@Composable
fun SettingsScreen(onToggleTheme: () -> Unit)
IconButton(onClick = onToggleTheme)

this accomplishes the dark and light theme, now what if I wanted to have more themes, so something like this perhaps?

@Composable
fun AppTheme(currentTheme: String,
             content: @Composable() () -> Unit) {
    val colors = when (currentTheme) {
        "Pink" -> PinkThemeColors
        "Light" -> LightThemeColors
        "Red" -> RedThemeColors
        "Rainbow" -> RainbowTheme
        else -> LightThemeColors
    }
    MaterialTheme(
        colors = colors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes,
    ) {
        content()
    }
}

how would I call it in an onClick button in another screen (one button for red, other for pink etc)?

I'm still a beginner so sorry for any confusion, any help would be greatly appreciated.

0 Answers
Related