[Idea] Support for ImageVector with themed color on preview and gutter on Android Studio

[fillipeoliveira-hotmart]

Hi,

Recently i needed to create some images that use color from the theme pallet, so it can change the color of the image when the app theme change.
But doing that, i discover that Valkyrie plugin on Android Studio do not resolve the color, showing everything as black on Preview and Gutter icons.
Is possible to add support to use the default colors of the theme on previews?

Here a example:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

val ChartLine: ImageVector
    @Composable get() {
        return ImageVector.Builder(
            name = "ChartLine",
            defaultWidth = 800.dp,
            defaultHeight = 800.dp,
            viewportWidth = 64f,
            viewportHeight = 64f,
        ).apply {
            path(fill = SolidColor(Color(0xFF394240))) {
                moveTo(60f, 0f)
                horizontalLineTo(4f)
                curveTo(1.789f, 0f, 0f, 1.789f, 0f, 4f)
                verticalLineToRelative(56f)
                curveToRelative(0f, 2.211f, 1.789f, 4f, 4f, 4f)
                horizontalLineToRelative(56f)
                curveToRelative(2.211f, 0f, 4f, -1.789f, 4f, -4f)
                verticalLineTo(4f)
                curveTo(64f, 1.789f, 62.211f, 0f, 60f, 0f)
                close()
                moveTo(4f, 2f)
                horizontalLineToRelative(56f)
                curveToRelative(1.104f, 0f, 2f, 0.896f, 2f, 2f)
                verticalLineToRelative(21.428f)
                lineToRelative(-11.409f, 6.713f)
                curveTo(49.49f, 30.832f, 47.844f, 30f, 46f, 30f)
                curveToRelative(-1.8f, 0f, -3.41f, 0.796f, -4.51f, 2.051f)
                lineToRelative(-15.93f, -9.803f)
                curveTo(25.842f, 21.553f, 26f, 20.796f, 26f, 20f)
                curveToRelative(0f, -3.314f, -2.686f, -6f, -6f, -6f)
                reflectiveCurveToRelative(-6f, 2.686f, -6f, 6f)
                curveToRelative(0f, 1.296f, 0.414f, 2.492f, 1.112f, 3.473f)
                lineTo(2f, 36.586f)
                verticalLineTo(4f)
                curveTo(2f, 2.896f, 2.896f, 2f, 4f, 2f)
                close()
                moveTo(46f, 32f)
                curveToRelative(2.209f, 0f, 4f, 1.791f, 4f, 4f)
                reflectiveCurveToRelative(-1.791f, 4f, -4f, 4f)
                reflectiveCurveToRelative(-4f, -1.791f, -4f, -4f)
                reflectiveCurveTo(43.791f, 32f, 46f, 32f)
                close()
                moveTo(16f, 20f)
                curveToRelative(0f, -2.209f, 1.791f, -4f, 4f, -4f)
                reflectiveCurveToRelative(4f, 1.791f, 4f, 4f)
                reflectiveCurveToRelative(-1.791f, 4f, -4f, 4f)
                reflectiveCurveTo(16f, 22.209f, 16f, 20f)
                close()
                moveTo(60f, 62f)
                horizontalLineTo(4f)
                curveToRelative(-1.104f, 0f, -2f, -0.896f, -2f, -2f)
                verticalLineTo(39.414f)
                lineToRelative(14.526f, -14.527f)
                curveTo(17.507f, 25.586f, 18.704f, 26f, 20f, 26f)
                curveToRelative(1.8f, 0f, 3.41f, -0.795f, 4.51f, -2.051f)
                lineToRelative(15.93f, 9.804f)
                curveTo(40.158f, 34.447f, 40f, 35.205f, 40f, 36f)
                curveToRelative(0f, 3.314f, 2.686f, 6f, 6f, 6f)
                reflectiveCurveToRelative(6f, -2.686f, 6f, -6f)
                curveToRelative(0f, -0.752f, -0.145f, -1.471f, -0.397f, -2.135f)
                lineTo(62f, 27.748f)
                verticalLineTo(60f)
                curveTo(62f, 61.104f, 61.104f, 62f, 60f, 62f)
                close()
            }
            path(fill = SolidColor(MaterialTheme.colorScheme.primary)) {
                moveTo(46f, 36f)
                moveToRelative(-4f, 0f)
                arcToRelative(4f, 4f, 0f, isMoreThanHalf = true, isPositiveArc = true, 8f, 0f)
                arcToRelative(4f, 4f, 0f, isMoreThanHalf = true, isPositiveArc = true, -8f, 0f)
            }
            path(fill = SolidColor(MaterialTheme.colorScheme.secondary)) {
                moveTo(20f, 20f)
                moveToRelative(-4f, 0f)
                arcToRelative(4f, 4f, 0f, isMoreThanHalf = true, isPositiveArc = true, 8f, 0f)
                arcToRelative(4f, 4f, 0f, isMoreThanHalf = true, isPositiveArc = true, -8f, 0f)
            }
            path(fill = SolidColor(MaterialTheme.colorScheme.primaryContainer)) {
                moveTo(60f, 2f)
                horizontalLineTo(4f)
                curveTo(2.896f, 2f, 2f, 2.896f, 2f, 4f)
                verticalLineToRelative(32.586f)
                lineToRelative(13.112f, -13.113f)
                curveTo(14.414f, 22.492f, 14f, 21.296f, 14f, 20f)
                curveToRelative(0f, -3.314f, 2.686f, -6f, 6f, -6f)
                reflectiveCurveToRelative(6f, 2.686f, 6f, 6f)
                curveToRelative(0f, 0.796f, -0.158f, 1.553f, -0.439f, 2.248f)
                lineToRelative(15.93f, 9.803f)
                curveTo(42.59f, 30.796f, 44.2f, 30f, 46f, 30f)
                curveToRelative(1.844f, 0f, 3.49f, 0.832f, 4.591f, 2.141f)
                lineTo(62f, 25.428f)
                verticalLineTo(4f)
                curveTo(62f, 2.896f, 61.104f, 2f, 60f, 2f)
                close()
            }
            path(fill = SolidColor(MaterialTheme.colorScheme.secondaryContainer)) {
                moveTo(52f, 36f)
                curveToRelative(0f, 3.314f, -2.686f, 6f, -6f, 6f)
                reflectiveCurveToRelative(-6f, -2.686f, -6f, -6f)
                curveToRelative(0f, -0.795f, 0.158f, -1.553f, 0.439f, -2.247f)
                lineToRelative(-15.93f, -9.804f)
                curveTo(23.41f, 25.205f, 21.8f, 26f, 20f, 26f)
                curveToRelative(-1.296f, 0f, -2.493f, -0.414f, -3.474f, -1.113f)
                lineTo(2f, 39.414f)
                verticalLineTo(60f)
                curveToRelative(0f, 1.104f, 0.896f, 2f, 2f, 2f)
                horizontalLineToRelative(56f)
                curveToRelative(1.104f, 0f, 2f, -0.896f, 2f, -2f)
                verticalLineTo(27.748f)
                lineToRelative(-10.397f, 6.117f)
                curveTo(51.855f, 34.529f, 52f, 35.248f, 52f, 36f)
                close()
            }
        }.build()
    }

@Preview
@Composable
private fun ChartLinePreview() {
    Box(modifier = Modifier.padding(12.dp)) {
        Image(imageVector = ChartLine, contentDescription = null)
    }
}

on Valkyrie preview and gutter icons, it shows the image as black

But on Android Studio Preview, even not setting any theme directly on @Preview function, it get the default value of the color on MaterialTheme.colorScheme.primary.

[egorikftp]

The issue is that Compose Preview compiles and runs the actual composable in a sandbox, whereas Valkyrie parses the .kt file’s PSI tree directly and renders it. This is a known limitation. The Analyze API (K2) can resolve simple color references in separate files, but resolving expressions like MaterialTheme.colorScheme.secondaryContainer not possible in this situation.

As an idea, I can add mapping between MaterialTheme.colorScheme.primary and real default color from material 3 (and do it for all colors from material2/material3)

[fillipeoliveira-hotmart]

Hi @egorikftp ,
Thanks for your response. It's sad it's not possible to resolve the color value to appear in the preview/gutter.

Regarding the idea of ​​mapping the values ​​of material2/3, it could be a workaround to solve it, but the problem is that it will only solve those who use the colors of the material theme.
In my case, we have a specific theme class for the images. So it would only work if somewhere (on settings screen, a file on project folder...) I could put a from/to for the colors I need to parse. For example:
MyCustomTheme.image.primaryColor solve as Color(0xFFFF0000)

It may be a very niche case, but it's an idea... =)