Jetpack Compose中如何用自定义主题覆盖库主题的指定颜色与字体？

问题 #

我正在开发一款供内部应用使用的Jetpack Compose组件库，库内包含所有所需视图组件，且需要内置自定义主题（重点是颜色与字体，因为每个客户端应用都有完全自定义的配色和字体）。

当前的问题是：如果把主题及所有颜色配置都保留在库中，虽然能正常运行，但客户端应用无法修改各主题变量的颜色。比如对话框ActionBar的自定义颜色，我尝试用CompositionLocalProvider实现，只要库中颜色定义方式和Material 3主题生成的格式一致就能正常工作，示例代码如下：

val md_theme_light_primary = Color(0xFF6750A4)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)

但核心需求是：假设库中定义了DialogActionBarText这类颜色，能否仅向客户端暴露这些颜色变量供其设置？我希望只让客户端能轻松修改dialogActionBarLight、dialogActionBarDark这类颜色变量，以及myFont字体变量，同时把其余主题与颜色配置都保留在库中。我的目标是尽量减少客户端代码量，重复创建主题的方式违背了最初的分离设计初衷。

换种说法：如何在Jetpack Compose中实现类似XML里客户端覆盖库资源值的效果？

解决方案 #

方案1：可参数化默认值+极简初始化 #

修改库中主题初始化逻辑，将需要暴露的变量设为可参数化的默认值，客户端只需传入要修改的变量，其余沿用库内默认配置，无需重复构建整个主题对象。

颜色部分改造

// 库中定义：把需暴露的颜色设为带默认值的参数
fun getLightColors(
    dialogActionBarColor: Color = Color(0xFFAABBCC) // 原默认dialogActionBarLight
): TestColors = TestColors(
    dialogActionBarColor = dialogActionBarColor,
    isLight = true
)

fun getDarkColors(
    dialogActionBarColor: Color = Color(0xFF112233) // 原默认dialogActionBarDark
): TestColors = TestColors(
    dialogActionBarColor = dialogActionBarColor,
    isLight = false
)

// 保留原TestColors类不变
class TestColors(
    dialogActionBarColor: Color,
    isLight: Boolean
) {
    var dialogActionBarColor by mutableStateOf(dialogActionBarColor)
    var isLight by mutableStateOf(isLight)

    fun copy(
        dialogActionBarColor: Color = this.dialogActionBarColor,
        isLight: Boolean = this.isLight
    ): TestColors = TestColors(dialogActionBarColor, isLight)
    
    fun updateColorFrom(other: TestColors) {
        dialogActionBarColor = other.dialogActionBarColor
    }
}

字体部分改造

// 库中暴露字体参数的初始化函数
fun getAppTypography(
    customFontFamily: FontFamily? = null
): AppTypography {
    val targetFont = customFontFamily ?: FontFamily(Font(R.font.open_sans_regular, FontWeight.Normal))
    return AppTypography(
        h1 = TextStyle(
            fontFamily = targetFont,
            fontWeight = FontWeight.Normal,
            fontSize = 24.sp
        ),
        h2 = TextStyle(
            fontFamily = targetFont,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        )
    )
}

// 原AppTypography类不变
data class AppTypography(
    val h1: TextStyle,
    val h2: TextStyle
)

客户端使用示例

TestTheme(
    colors = getLightColors(
        dialogActionBarColor = Color(0xFF00FF00) // 仅覆盖需要修改的颜色
    ),
    typography = getAppTypography(
        customFontFamily = FontFamily(Font(R.font.client_custom_font, FontWeight.Normal))
    )
) {
    // 客户端业务内容
}

方案2：分层CompositionLocal实现局部覆盖 #

通过新增专属CompositionLocal暴露可覆盖变量，库内部优先读取客户端传入的值，否则使用默认值，客户端无需修改整个主题对象。

库中新增可覆盖的CompositionLocal

// 库中定义：暴露给客户端的可覆盖变量
val LocalDialogActionBarLightColor = staticCompositionLocalOf { Color(0xFFAABBCC) }
val LocalDialogActionBarDarkColor = staticCompositionLocalOf { Color(0xFF112233) }
val LocalCustomFontFamily = staticCompositionLocalOf { 
    FontFamily(Font(R.font.open_sans_regular, FontWeight.Normal)) 
}

// 修改颜色初始化逻辑，优先使用CompositionLocal的值
fun getLightColors(): TestColors = TestColors(
    dialogActionBarColor = LocalDialogActionBarLightColor.current,
    isLight = true
)

fun getDarkColors(): TestColors = TestColors(
    dialogActionBarColor = LocalDialogActionBarDarkColor.current,
    isLight = false
)

// 修改字体初始化逻辑
fun getAppTypography(): AppTypography {
    val customFont = LocalCustomFontFamily.current
    return AppTypography(
        h1 = TextStyle(
            fontFamily = customFont,
            fontWeight = FontWeight.Normal,
            fontSize = 24.sp
        ),
        h2 = TextStyle(
            fontFamily = customFont,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        )
    )
}

客户端使用示例

CompositionLocalProvider(
    LocalDialogActionBarLightColor provides Color(0xFF00FF00),
    LocalCustomFontFamily provides FontFamily(Font(R.font.client_font, FontWeight.Normal))
) {
    TestTheme {
        // 客户端业务内容
    }
}

方案3：资源ID映射模拟XML资源覆盖 #

完全模拟XML中同名资源覆盖的逻辑，库中通过资源ID加载颜色/字体，客户端只需在自己的资源文件中定义同名资源即可自动覆盖。

库中实现

// 库中通过资源ID加载颜色，而非硬编码
val dialogActionBarLight: Color @Composable get() = ColorResource(id = R.color.dialog_action_bar_light)
val dialogActionBarDark: Color @Composable get() = ColorResource(id = R.color.dialog_action_bar_dark)

// 字体同理
val myFont: FontFamily @Composable get() = FontFamily(Font(R.font.app_default_font))

客户端操作

在客户端的res/values/colors.xml中定义同名颜色：

<color name="dialog_action_bar_light">#00FF00</color>
<color name="dialog_action_bar_dark">#0000FF</color>

在res/font/目录下放置同名字体文件app_default_font.ttf，即可自动覆盖库中的默认资源。

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