ComposeGears / ComposeGears/Valkyrie
[Idea] Support for ImageVector with themed color on preview and gutter on Android Studio
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
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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