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

参数或应用

TextStyle

定义。默认值为

Color.Unspecified

。
如果 color =

Color.Unspecified

并且样式没有设置颜色，则这将是

LocalContentColor

，如果未指定，它将提供默认的

Color.Black 

颜色。

您有不同的选择：

• 您可以添加

  Surface

  作为父容器。在这种情况下，它将使用主题中指定的

  Colors.onSurface

  。

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

• 在 color

   可组合项中使用 

  Text 参数

• 使用

  style

  参数：

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

• 使用自定义

  LocalContentColor

  覆盖默认

  Black

  颜色

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

Answer 2

您可以使用

Text

或使用

color

值指定

style

颜色。

当没有为这两个指定值时，撰写时的

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

Answer 4

您可以使用自定义文本可组合项：

@Composable
fun DayNightText(
text: String,
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colorScheme.onSurface, // Change default color here
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = LocalTextStyle.current
) {
    Text(
    text = text,
    modifier = modifier,
    color = color,
    fontSize = fontSize,
    fontStyle = fontStyle,
    fontWeight = fontWeight,
    fontFamily = fontFamily,
    letterSpacing = letterSpacing,
    textDecoration = textDecoration,
    textAlign = textAlign,
    lineHeight = lineHeight,
    overflow = overflow,
    softWrap = softWrap,
    maxLines = maxLines,
    onTextLayout = onTextLayout,
    style = style)
}

Answer 5

您可以使用

MaterialTheme.colors.onSurface

颜色作为

Text

颜色参数，而不是用

Text

包裹

Surface

以获得完全相同的

onSurface

颜色。

YourAppTheme(
    darkTheme = true
) {
    Text(
        text = "text with dark theme color",
        color = MaterialTheme.colors.onSurface
    )
}

Answer 6

通过

style = TextStyle(color = MaterialTheme.colorScheme.onBackground)

到

ClickableText()

解决了眼前的问题。这是在 Material3 中获得

onBackground

颜色的方法。