Jetpack Compose为组件库添加自定义主题色彩的实现方案

核心思路 #

利用宿主应用已有的MaterialTheme状态判断当前是亮色/暗色模式，在库内部预设对应配色，无需使用者传递任何主题相关参数或修改自身主题配置。

1. 定义库内部明暗配色（私有不暴露） #

先在库中封装好自己的明暗模式颜色集合，不需要对外暴露：

// 库内部私有配色对象，仅内部使用
private object LibraryColorSet {
    val light = LibraryColors(
        backgroundColor = Color(0xFFFFFFFF),
        buttonColor = Color(0xFF6200EE),
        progressLineColor = Color(0xFF03DAC6)
    )
    val dark = LibraryColors(
        backgroundColor = Color(0xFF121212),
        buttonColor = Color(0xFFBB86FC),
        progressLineColor = Color(0xFF03DAC6)
    )
}

// 内部数据类，封装库组件用到的所有颜色
private data class LibraryColors(
    val backgroundColor: Color,
    val buttonColor: Color,
    val progressLineColor: Color
)

2. 实现主题感知的颜色获取函数 #

通过MaterialTheme.colors.isLight判断宿主当前主题模式，返回对应配色：

@Composable
private fun getCurrentLibraryColors(): LibraryColors {
    return if (MaterialTheme.colors.isLight) {
        LibraryColorSet.light
    } else {
        LibraryColorSet.dark
    }
}

// 对外提供的颜色获取函数，匹配你需求中的命名
@Composable
fun getThemedBackgroundColor(): Color {
    return getCurrentLibraryColors().backgroundColor
}

@Composable
fun getThemedButtonColor(): Color {
    return getCurrentLibraryColors().buttonColor
}

@Composable
fun getThemedProgressLineColor(): Color {
    return getCurrentLibraryColors().progressLineColor
}

3. 在库组件中直接使用 #

调用上述函数即可自动适配宿主主题，无需使用者做额外操作：

@Composable
fun SomeLibraryComposable(someText: String) {
    val backgroundColor = getThemedBackgroundColor()
    val buttonColor = getThemedButtonColor()
    
    Box(modifier = Modifier.fillMaxSize().background(backgroundColor)) {
        Button(
            onClick = {},
            colors = ButtonDefaults.buttonColors(containerColor = buttonColor)
        ) {
            Text(someText)
        }
    }
}

方案优势 #

• 无需使用者传递任何参数：组件自动感知宿主主题状态，完全无侵入性
• 不依赖系统深色模式：MaterialTheme.colors.isLight适配所有主题切换场景（包括宿主手动切换主题的情况）
• 无需使用者修改自身主题：完全基于宿主已有的MaterialTheme体系，不需要额外添加CompositionLocal或主题配置

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