Jetpack Compose：即使主题很暗，文本也保持黑色

Question

即使主题设置为深色且背景为深色，应用中的文本仍然保持黑色。请看下面的代码和屏幕截图。

Theme.kt（在这里，在DarkColorPalette 中，我将onSurface 和onBackground 设置为Color.White，但这没有帮助）

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)
    )

屏幕代码（不要在意俄语文本）

@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("Я тут в первый раз")
            }
        }
    }
}

截图

Dark theme	Light theme

如果你需要更多代码，问我，我会提供的

Answer 1

Text 中的颜色由color 参数定义或应用TextStyle。默认值为Color.Unspecified。
如果 color = Color.Unspecified 并且 style 没有设置颜色，这将是 LocalContentColor，如果未指定，则提供默认的 Color.Black 颜色。

你有不同的选择：

• 您可以将 Surface 添加为父容器。在这种情况下，它将使用主题中指定的Colors.onSurface。

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

• 在Text可组合中使用color参数

• 使用 style 参数：

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

• 使用自定义LocalContentColor覆盖默认的Black颜色

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

Answer 2

您可以使用color 或style 值指定Text 颜色。

当没有为这两个指定值时，compose 上的Text 使用LocalContentColor 值，默认为Black，并且不依赖于主题

如果您想更改整个应用的默认文本颜色，最好的解决方案是在引入主题后立即覆盖此值：

setContent {
    YourTheme {
        CompositionLocalProvider(
            LocalContentColor provides MaterialTheme.colors.onSecondary // replace this with needed color from your pallete
        ) {
            Content()
        }
    }
}

您还可以使用CompositionLocalProvider 再次覆盖此值到您应用的任何部分

Answer 3

您可以像这样在应用的主题中指定文本样式：

@Composable
fun MyTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = DarkColors,
        typography = Typography(body1 = TextStyle(color = Color.White), button = TextStyle(color = Color.Black)),
        content = content
    )
}

然后将您的内容包装在 MyTheme 中：

MyTheme {
    AppContent()
}