Home > database >  Jetpack Compose - how can I add an if statement to the way an image renders
Jetpack Compose - how can I add an if statement to the way an image renders

Time:01-09

I'm trying to get an image to have a color filter of black or white depending on if the phone is in light or dark mode. How can I do this in Jetpack Compose? Below is so arbitrary code I've written to explain what I want to do.

Image(
            painter = painterResource(id = R.drawable.app_logo),
            contentDescription = null,
            colorFilter = ColorFilter.tint(
                if isSystemInDarkTheme() {
                    Color.White
                } else {
                    Color.Black
                }
            ),
            modifier = Modifier
                .size(125.dp, 125.dp)
                .align(alignment = Alignment.TopCenter)
                .offset(0.dp, 50.dp)
        )

CodePudding user response:

I've managed to figure this out actually - see code below

Image(
            painter = painterResource(id = R.drawable.app_logo),
            contentDescription = null,
            colorFilter = ColorFilter.tint(
                (if (isSystemInDarkTheme()) {
                    Color.White
                } else {
                    Color.Black
                }) as Color
            ),
            modifier = Modifier
                .size(125.dp, 125.dp)
                .align(alignment = Alignment.TopCenter)
                .offset(0.dp, 50.dp)
        )
  • Related