ComposeGears / ComposeGears/Valkyrie

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

Open
#1,029 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Kotlin
Stars
889
Forks
26
Avg merge
36m
Merged PRs (30d)
2

Description

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

Image Image

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.

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided ImageVector example in Valkyrie's preview and gutter icons, then compare the result with Android Studio's Compose Preview. Trace how MaterialTheme.colorScheme values are handled; done means themed colors render instead of appearing black in both Valkyrie surfaces.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
mobile-dev, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.