Jetpack Compose Material 3 主题定制：能否仅使用自定义颜色配置主题？

当然可以，Jetpack Compose Material 3 完全支持自定义颜色并仅将其绑定到主题配置，这样所有基于Material 3的UI组件都会自动继承这些颜色，无需逐个组件手动设置。

实现步骤 #

1. 定义自定义颜色值

先创建你需要的颜色常量，直接使用Compose的Color类定义：

// 自定义颜色集合
val CustomPrimary = Color(0xFF6200EE)
val CustomPrimaryVariant = Color(0xFF3700B3)
val CustomSecondary = Color(0xFF03DAC6)
val CustomBackground = Color(0xFFF5F5F5)
val CustomSurface = Color(0xFFFFFF)

2. 创建自定义ColorScheme

通过Material 3提供的lightColorScheme或darkColorScheme方法，将自定义颜色填充到对应的颜色槽中：

// 自定义亮色主题配色方案
val CustomLightColorScheme = lightColorScheme(
    primary = CustomPrimary,
    primaryContainer = CustomPrimaryVariant,
    secondary = CustomSecondary,
    background = CustomBackground,
    surface = CustomSurface,
    // 可根据需求自定义更多颜色槽，如onPrimary、onSecondary等
    onPrimary = Color.White,
    onSecondary = Color.Black
)

// 自定义暗色主题配色方案（可选）
val CustomDarkColorScheme = darkColorScheme(
    primary = Color(0xFFBB86FC),
    primaryContainer = Color(0xFF3700B3),
    secondary = Color(0xFF03DAC6),
    background = Color(0xFF121212),
    surface = Color(0xFF1E1E1E)
)

3. 封装自定义主题

将自定义的ColorScheme传入MaterialTheme，封装成可复用的主题组件：

@Composable
fun AppCustomTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        CustomDarkColorScheme
    } else {
        CustomLightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography, // 可同时自定义排版
        shapes = Shapes, // 可同时自定义形状
        content = content
    )
}

4. 使用自定义主题

在应用入口处包裹你的UI内容，所有内部的Material 3组件都会自动使用主题中的自定义颜色：

@Composable
fun MainScreen() {
    AppCustomTheme {
        // 这里的组件都会自动应用主题颜色
        Scaffold(
            topBar = { TopAppBar(title = { Text("自定义主题示例") }) },
            content = { padding ->
                Column(
                    modifier = Modifier.padding(padding).fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Button(onClick = { /* 点击事件 */ }) {
                        Text("自定义颜色按钮")
                    }
                    TextField(value = "", onValueChange = {}, label = { Text("自定义颜色输入框") })
                }
            }
        )
    }
}

核心优势 #

• 统一颜色管理：所有颜色集中在主题中，修改时只需调整ColorScheme，无需逐个组件修改
• 自动适配组件：Material 3组件默认会读取主题颜色，无需额外配置
• 支持明暗主题切换：可分别为亮色/暗色主题定义不同的自定义颜色，适配系统主题

内容的提问来源于stack exchange，提问作者emreturka