Jetpack Compose迁移：如何在主题依赖的矢量Drawable中使用Compose主题色？

结论 #

你无法直接在XML矢量Drawable中引用Compose主题内定义的颜色值。
XML Drawable属于Android View体系的资源层产物，仅能识别res/目录下编译进资源表的颜色引用，而Compose主题的颜色是Kotlin代码中声明的运行时变量，不会被纳入Android资源索引，因此XML文件无法直接读取。

可用解决方案 #

方案1：对齐资源色值（改造成本最低） #

将Compose主题与XML颜色引用绑定到同一套资源色值即可实现两侧颜色同步：

1. 分别在res/values/colors.xml（浅色主题）和res/values-night/colors.xml（深色主题）中定义好color_surface、sync_profile_fill、sync_profile_stroke对应的色值，保持现有矢量Drawable的代码完全不变。
2. 在Compose自定义主题的颜色配置处，直接读取对应颜色资源：

// 浅色主题配色示例
val LightColorPalette = lightColors(
    surface = colorResource(R.color.color_surface),
    syncProfileFill = colorResource(R.color.sync_profile_fill),
    syncProfileStroke = colorResource(R.color.sync_profile_stroke),
    // 其余配色项
)
// 深色主题配色示例
val DarkColorPalette = darkColors(
    surface = colorResource(R.color.color_surface),
    syncProfileFill = colorResource(R.color.sync_profile_fill),
    syncProfileStroke = colorResource(R.color.sync_profile_stroke),
    // 其余配色项
)

主题切换时，XML Drawable会自动跟随应用的日夜模式加载对应色值，和Compose主题颜色完全一致。

方案2：矢量图转Compose原生实现（完全适配Compose生态） #

如果希望完全脱离XML资源，可以将现有矢量图转换为Compose原生的ImageVector，直接引用主题颜色：
可以直接使用Android Studio的「Import Vector Asset」功能导入XML后一键生成对应的Compose ImageVector代码，也可以手动转换路径：

val ProfileAvatarIcon: ImageVector
    get() {
        if (_profileAvatarIcon != null) return _profileAvatarIcon!!
        _profileAvatarIcon = Builder(
            name = "ProfileAvatarIcon",
            defaultWidth = 70.dp,
            defaultHeight = 70.dp,
            viewportWidth = 70f,
            viewportHeight = 70f
        ).apply {
            // 第一层圆形背景，直接取Compose主题的surface颜色
            path(fill = MaterialTheme.colors.surface) {
                moveTo(35f, 35f)
                moveToRelative(-35f, 0f)
                arcTo(35f, 35f, 0f, isMoreThanHalf = true, isPositiveArc = true, dx = 70f, dy = 0f)
                arcTo(35f, 35f, 0f, isMoreThanHalf = true, isPositiveArc = true, dx = -70f, dy = 0f)
            }
            // 第二层填充色，取主题自定义的syncProfileFill颜色
            path(fill = MaterialTheme.colors.syncProfileFill) {
                moveTo(35f, 35f)
                moveToRelative(-35f, 0f)
                arcTo(35f, 35f, 0f, isMoreThanHalf = true, isPositiveArc = true, dx = 70f, dy = 0f)
                arcTo(35f, 35f, 0f, isMoreThanHalf = true, isPositiveArc = true, dx = -70f, dy = 0f)
            }
            // 第三层头像轮廓
            path(
                fill = Color.Transparent,
                stroke = MaterialTheme.colors.syncProfileStroke,
                strokeLineWidth = 2f
            ) {
                moveTo(35f, 35.2468f)
                curveTo(29.8084f, 35.2468f, 21.3889f, 38.3349f, 21.3889f, 44.4649f)
                lineToRelative(0f, 0f)
                curveTo(23.6574f, 50.5554f, 35f, 50.5554f, 35f, 50.5554f)
                curveTo(46.3426f, 50.5554f, 48.6111f, 44.4649f, 48.6111f, 44.4649f)
                lineToRelative(0f, 0f)
                curveTo(48.6111f, 38.3349f, 40.1917f, 35.2468f, 35f, 35.2468f)
                moveTo(35f, 35.2468f)
                curveTo(39.2956f, 35.2468f, 42.7778f, 31.7093f, 42.7778f, 27.3456f)
                curveTo(42.7778f, 22.9818f, 39.2956f, 19.4443f, 35f, 19.4443f)
                curveTo(30.7045f, 19.4443f, 27.2222f, 22.9818f, 27.2222f, 27.3456f)
                curveTo(27.2222f, 31.7093f, 30.7045f, 35.2468f, 35f, 35.2468f)
            }
        }.build()
        return _profileAvatarIcon!!
    }
private var _profileAvatarIcon: ImageVector? = null

这种方式所有颜色完全绑定Compose主题，切换主题时会自动更新颜色，无需依赖XML资源和日夜模式配置。

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