Jetpack Compose: Text remains black when the theme is dark despite using approved solution from analogous question

Question

There is an analogous question to mine already on StackOverflow. It has a comprehensive, accepted answer that I thought would help me in what seems like a trivial problem.

I have a composable consisting of a Text composable. It is called PickerLabel as it is a part of a larger picker component:

@Composable
private fun PickerLabel(
    text: String,
    modifier: Modifier
) {
    Text(
        text = text,
        fontSize = 64.sp,
        modifier = modifier
            .pointerInput(Unit) {
                detectTapGestures { }
            }
    )
}

It is used like this (it feels like nothing in its modifier can be impacting the text color):

PickerLabel(
    text = \* stringText *\,
    modifier = Modifier
        .align(Alignment.Center)
        .alpha(\* stringText *\)
)

One last useful thing to see from my code would be the Theme.kt:

private val LightColorPalette = lightColors(
    primary = Jacarta,
    primaryVariant = BlueZodiac,
    secondary = ButterflyBush,
    secondaryVariant = Victoria,
    onPrimary = White,
    onSecondary = White,
    onSurface = White
)

private val DarkColorPalette = darkColors(
    primary = Jacarta,
    primaryVariant = BlueZodiac,
    secondary = ButterflyBush,
    secondaryVariant = Victoria,
    onPrimary = White,
    onSecondary = White,
    onSurface = White
)

@Composable
fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalSpace provides Space()) {
        MaterialTheme(
            colors = if (darkTheme) DarkColorPalette else LightColorPalette,
            typography = Typography,
            shapes = Shapes,
            content = content
        )
    }
}

With that setup in dark mode the PickerLabel is composed as such:

while it should look like this (it looks like this only in light mode):

Now, according to the answer to the previously mentioned question, I tried the following:

1. Adding a Surface as a parent container (the onSurface color was specified as White in Theme.kt):

setContent {
    AppTheme {
        Surface {
            ScreenContent()
        }
    }
}

2. Using the color parameter in the Text composable:

@Composable
private fun PickerLabel(
    text: String,
    modifier: Modifier
) {
    Text(
        text = text,
        color = White,
        fontSize = 64.sp,
        modifier = modifier
            .pointerInput(Unit) {
                detectTapGestures { }
            }
    )
}

3. Using the style parameter in the Text composable:

@Composable
private fun PickerLabel(
    text: String,
    modifier: Modifier
) {
    Text(
        text = text,
        style = LocalTextStyle.current.copy(color = White),
        fontSize = 64.sp,
        modifier = modifier
            .pointerInput(Unit) {
                detectTapGestures { }
            }
    )
}

4. Using a custom LocalContentColor to override the default Black color:

setContent {
    AppTheme {
        CompositionLocalProvider(
            LocalContentColor provides White
        ) {
            ScreenContent()
        }
    }
}

NONE of these solutions worked for me - each time I've tried them the Text color remained black no matter what.

Maybe there is a different factor deciding about the Text color that the mentioned answers didn't recognize. Or maybe I've made a mistake that can be spotted here in my code. Either way, if You have the slightest idea about what might be going on, please help.

Edit: changed the Theme.kt to include the check for system theme, to decide which color palette to use.

Answer 1

Maybe this could be a different solution :D Using MaterialTheme

**Method**
@Composable
private fun PickerLabel(
    text: String,
    modifier: Modifier = Modifier
) {
    Text(
        text = text,
//you can use body1, h5, h4, caption etc for your typography
        style = MaterialTheme.typography.caption.copy(fontSize = 64.sp),
        modifier = modifier.pointerInput(Unit) {
                detectTapGestures { }
        }
    )
}


**Preview**
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    AppTheme {
        Surface {
            Column {
                PickerLabel("12:53")
            }
        }
    }
}

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun DefaultDarkPreview() {
    AppTheme {
        Surface {
            Column {
                PickerLabel("12:53")
            }
        }
    }
}

**Result here :D ** Dark and light mode text