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 amp themes to change the theme of our icons from greyscale to destructive or disabled One SVG gt multiple themes to change the different stroke colors

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

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

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

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.

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

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.

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?

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

zsperske

12/08/2021, 2:04 AM

very cool, thank you Chris!

3 Views

#compose Join Slack