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

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

截图

黑暗主题	轻主题

如果您需要更多代码，请询问我，我会提供

Answer 1

Text中的color由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颜色。

当没有为这两个指定值时，撰写上的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()
}