How do I theme `NavigationBar()` and `NavigationBarItem()` in Jetpack Compose?-CodePudding

I'm having a terribly hard time trying to change the color(s) of selected/unselected icons and the active indicator. The docs don't have examples or proper Kdocs and I can't seem to find any examples online (please point me to any you know of). The icons just don't change their color and remain black.

My NavigationBar looks like this:

NavigationBar(
    containerColor = NavBarColor,
    contentColor = ContentColor, // <-- Can't tell what this is for.
    modifier = Modifier
        .align(Alignment.BottomCenter)
) {
    // ...
    destinations.forEachIndexed { index, item ->
        NavigationBarItem(
            selected = currentDestination?.hierarchy?.any { it.route == item.route } == true,

            onClick = {
                // ...
            },

            icon = {
                when (index) {
                    0 -> {
                        Icon(
                            imageVector = Icons.Rounded.Add,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                    1 -> {
                        Icon(
                            imageVector = Icons.Rounded.Home,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                    2 -> {
                        Icon(
                            imageVector = Icons.Rounded.Call,
                            contentDescription = stringResource(id = item.description)
                        )
                    }
                }
            },

            // Why on Earth does this not want to work:
            colors = NavigationBarItemDefaults.colors(
                selectedIconColor = NavBarColor, // <-- This doesn't work.
                unselectedIconColor = ContentColor, // <-- This doesn't work.
                indicatorColor = ContentColor // <-- This works.
            )
        )
    }
}

CodePudding user response：

Use import androidx.compose.material3.Icon for your icon.

You're mixing material and material3 code here: Icon is imported from material and uses material LocalContentColor, on the other hand NavigationBarItem is material3 view and provides material3 LocalContentColor.