渐进式编程课
KMP 目录
第 24 课2026.08.09

颜色、排版和形状集中定义后，共享组件不必到处写死样式；切换亮色或深色模式时也能整体保持一致。

第 24 课：Compose 共享主题

知识点

在共享代码中用 MaterialTheme 统一亮色与深色配色。

用途

颜色、排版和形状集中定义后，共享组件不必到处写死样式；切换亮色或深色模式时也能整体保持一致。

核心概念

  • lightColorScheme() 和 darkColorScheme() 分别定义两套颜色令牌。
  • isSystemInDarkTheme() 读取当前系统主题。
  • MaterialTheme 将主题向下提供给整个组件树。
  • 子组件从 MaterialTheme.colorScheme 取色，而不是重复硬编码颜色。

示例代码

kotlin
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

private val LightColors = lightColorScheme(
    primary = Color(0xFF006C4C),
    onPrimary = Color.White,
)

private val DarkColors = darkColorScheme(
    primary = Color(0xFF5BDBA7),
    onPrimary = Color(0xFF003829),
)

@Composable
fun KmpTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = if (isSystemInDarkTheme()) DarkColors else LightColors,
        content = content,
    )
}

@Composable
fun App() {
    KmpTheme {
        HomeScreen()
    }
}

组件内这样使用主题颜色：

kotlin
Text(
    text = "Hello KMP",
    color = MaterialTheme.colorScheme.primary,
)

5 分钟练习

为亮色、深色配色分别增加 error 颜色，并让错误文案读取主题中的错误色。

参考答案

kotlin
private val LightColors = lightColorScheme(
    primary = Color(0xFF006C4C),
    error = Color(0xFFBA1A1A),
)

private val DarkColors = darkColorScheme(
    primary = Color(0xFF5BDBA7),
    error = Color(0xFFFFB4AB),
)

@Composable
fun ErrorText(message: String) {
    Text(
        text = message,
        color = MaterialTheme.colorScheme.error,
    )
}

与上一课的联系

上一课统一了共享图片的来源；今天进一步统一界面样式，让这些资源和组件在 Android、iOS 上使用同一套视觉规则。

参考资料