Jetpack Compose: Text remains black even when the theme is dark

Question

The text in the app still remains black even if the theme is set to dark and background is dark. Just take a look at the code and screenshots below.

Theme.kt (here, in DarkColorPalette, I set onSurface and onBackground to Color.White but it doesn't help)

private val DarkColorPalette = darkColors(
    primary = PastelGreen,
    secondary = PastelGreenTransparent,
    onPrimary = Color.White,
    onSecondary = PastelGreen,
    onBackground = Color.White,
    onSurface = Color.White
)

private val LightColorPalette = lightColors(
    primary = PastelGreen,
    secondary = PastelGreenTransparent,
    onPrimary = Color.White,
    onSecondary = PastelGreen,
)

@Composable
fun EschoolTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {

    MaterialTheme(
        colors = if (darkTheme) DarkColorPalette else LightColorPalette,
        typography = typography,
        shapes = Shapes,
        content = content
    )
}

Type.kt

val manropeFamily = FontFamily(
    Font(R.font.light, FontWeight.Light),
    Font(R.font.regular, FontWeight.Normal),
    Font(R.font.medium, FontWeight.Medium),
    Font(R.font.bold, FontWeight.Bold),
    Font(R.font.extra_bold, FontWeight.ExtraBold),
    Font(R.font.extra_light, FontWeight.ExtraLight),
    Font(R.font.semi_bold, FontWeight.SemiBold),
)

val typography =
    Typography(
        defaultFontFamily = manropeFamily,
        h5 = TextStyle(fontWeight = FontWeight.Bold, fontSize = 23.sp,),
        button = TextStyle(letterSpacing = 0.sp, fontWeight = FontWeight.Bold)
    )

Code of the screen (don't take care about Russian texts)

@Composable
fun Onboarding() {
    EschoolTheme {
        Column(
            modifier = Modifier
                .padding(20.dp)
        ) {
            Column(
                Modifier
                    .weight(1f)
                    .fillMaxWidth()
            ) {
                Spacer(modifier = Modifier.weight(1f))
                Image(
                    painter = painterResource(id = R.drawable.icon),
                    contentDescription = "Иконка приложения со смайлом, смотрящим через монокль",
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .size(100.dp)
                )
                Spacer(modifier = Modifier.height(30.dp))
                Text(
                    "Добро пожаловать в eschool!",
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.h5,
                    modifier = Modifier.align(
                        Alignment.CenterHorizontally
                    )
                )
                Spacer(modifier = Modifier.weight(1f))
            }
            Text(
                "Здесь ты можешь быстро делиться домашкой и расписанием со своими одноклассниками без всяких мессенжджеров. Используй это приложение как школьный дневник, в который ты обычно записываешь д/з и расписание. Всё, что ты записываешь сюда, будет сразу видно и твоим одноклассникам. Тебе больше не придётся ждать ответа от твоих одноклассников в мессенджерах или наоборот отвечать им. Чтобы начать пользоваться приложением, надо войти в аккаунт.",
                style = MaterialTheme.typography.body2
            )
            Spacer(modifier = Modifier.height(20.dp))
            LargeButton(onClick = { /*TODO*/ }, secondary = true) {
                Text("У меня уже есть аккаунт")
            }
            Spacer(modifier = Modifier.height(10.dp))
            LargeButton(onClick = { /*TODO*/ }) {
                Text("Я тут в первый раз")
            }
        }
    }
}

Screenshots

Dark theme	Light theme

If you need more code, ask me, I'll provide it

Answer 1

The color in the Text is defined by the color parameter or applying a TextStyle. The default value is Color.Unspecified.
If color = Color.Unspecified and style has no color set, this will be LocalContentColor which provides a default Color.Black color if not specified.

You have different options:

• You can add as parent container a Surface. In this case it will be used the Colors.onSurface specified in your theme.

    Surface(){
      Column(){
        Text(){...}
      }
    }

• Use the color parameter in the Text composable

• Use the style parameter:

Text(style = LocalTextStyle.current.copy(color = Red)){...}

• Use a custom LocalContentColor to override the default Black color

CompositionLocalProvider(LocalContentColor provides MaterialTheme.colors.xxx) {
      Text()
}