A modern programming language that makes developers happier.

kotlinlang

image.png

I found app background mix up when turning to dark theme as below, we can see Text background layers overlapping. Is there an easy to debug this issue? Thanks!

I'm not really sure what I'm looking at, but you can post some code or I think you can use Layout Inspector tool in Android Studio.

Thanks, let me first try Layout Inspector :slightly_smiling_face:

Here is the code
```@Composable
fun RowFlowerCard(rowFlower: RowFlower) {
    Card(
        Modifier
            .height(136.dp)
            .width(130.dp)
            .background(MaterialTheme.colors.surface),
        shape = MaterialTheme.shapes.small,
        elevation = 4.dp
    ) {

        Column(
            Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.surface)
        ) {
            Image(
                painter = painterResource(id = rowFlower.image),
                contentDescription = rowFlower.title,
                Modifier
                    .height(100.dp),
                contentScale = ContentScale.Crop
            )
            Spacer(modifier = Modifier.height(8.dp))
            Row(
                Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.surface)) {
                Spacer(modifier = Modifier.width(16.dp))
                Text(
                    text = rowFlower.title,
                    style = MaterialTheme.typography.h2,
                    color = MaterialTheme.colors.onPrimary,
                    modifier = Modifier.height(36.dp)
                )
            }
        }
    }
}```

Actually, I commit it: <https://github.com/jbj88817/Bloom-compose/blob/main/app/src/main/java/us/bojie/bloom_compose/ui/MainPage.kt#L148-L186>

Start by replacing each occurrence of `background(MaterialTheme.colors.surface)` by `background` with a different translucent primary color (like 50% red, 50% blue etc) and see if the boundaries of those elements are what you intend them to be.

You have three elements nested in each other with the same background color, but maybe something up top applies an alpha.

+1 - the issues you are seeing are likely tied to the transparency of the colors used in the background fills, combined with revealing the elevation/shadow of the card.