https://kotlinlang.org logo
#compose
Title
# compose
z

zsperske

12/08/2021, 1:11 AM
How do you apply a new theme to something like an Image? Most of our icons use SVGs, and in the View world we use attrs & themes to change the theme of our icons from greyscale to destructive or disabled. One SVG -> multiple themes to change the different stroke colors
c

Chris Sinco [G]

12/08/2021, 1:54 AM
For Icon Composables, you can set the tint directly as a parameter, or it pulls from the contentColor ambient by default
Ambient -> MaterialTheme, CompositionLocal
z

zsperske

12/08/2021, 1:54 AM
We don’t quite use tint, we use “colorways”
where each icon uses a set of 3 colors
that we change via an
attr
c

Chris Sinco [G]

12/08/2021, 1:56 AM
I see. I’m not sure there’s a straightforward way to do it with the built-in Composables like Image and Icon. You can use Android resources for them though, so the theming information I think can be built in there? But then the color theme info is coming from XML land instead of Compose theming
The other alternative which is more work is redrawing all the SVGs as Kotlin functions via paths. This is how the Material icons library works in Compose. Then you can control everything very granularly and write higher order functions with parameters to theme things. But you’d need to somehow convert all your icons to Composable Kotlin functions first.
z

zsperske

12/08/2021, 1:58 AM
yeah we have an icon set with 100-200 entries
so I don’t think that would scale for us
unless it can be automated
c

Chris Sinco [G]

12/08/2021, 1:59 AM
Yeah we have internal scripts that convert all the Material icons from drawables to Kotlin functions (~5000) but we only run that build script when icons change, which is not often. But that is how the Material icons library is updated.
z

zsperske

12/08/2021, 2:00 AM
Interesting, is that code public? for your first option, we’d basically have to use XML land to get a bitmap and then hand that to the Image? Since all you can feed an
Image
is a R.drawable.whatever reference right?
c

Chris Sinco [G]

12/08/2021, 2:03 AM
Yes, it’s here: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]otlin/androidx/compose/material/icons/generator/IconParser.kt I don’t fully understand myself but @Louis Pullen-Freilich [G] who is the author may be able to help
That whole
generator
directory has everything I think, including the raw drawable icons to convert from
z

zsperske

12/08/2021, 2:04 AM
very cool, thank you Chris!
4 Views