Jetpack Compose: Content color of TabRow

Issue

In my app, I am using TabRow, that has two tabs:

I do set the content color with

TabRow(
  ...
  contentColor = Color.Black,
  ...
)

While "ACTIVE" is really displayed in black, I also want "INACTIVE" in black and not grey, but in a different font weight.

I don't see any chance to directly do this with TabRow.

Is there any other way to do this right now?

Solution

I think you can do this using the Tab component itself.

val isSelected = pagerState.currentPage == index
Tab(
    text = {
        Text(
            "Tab $title",
            fontWeight = if (isSelected) FontWeight.Bold else FontWeight.Light,
            color = Color.Black
        )
    },
    selected = isSelected,
    onClick = {
        coroutineScope.launch {
            pagerState.animateScrollToPage(index)
        }
    },
)

Answered By - nglauber