How to load the Dark drawable resource in Jetpack Compose?

Question

I want to load different resource files according to Dark/Light theme in Jetpack Compose, but it is not working.

What should I do next?

Image(
    modifier = Modifier.align(Alignment.CenterHorizontally),
    painter = painterResource(id = R.drawable.ic_daynight),
    contentDescription = null
)

res/drawable/ic_daynight.xml:

drawable ic_daynight

res/drawable-night/ic_daynight.xml:

drawable-night ic_daynight

Res folder:

drawable image

theme.xml:

theme.xml

Your code should work there is nothing wrong with that ... Are you sure you are using different resources ? — AgentP, Dec 03 '21 at 16:29
This should work out of the box as long as you're creating your `Theme` correctly and your `themes.xml` is correct. Can you share what those look like in your project? — Bartek Lipinski, Dec 03 '21 at 17:42
Thanks for answering me, I edited the question and added a screenshot of `theme.xml` — Jero, Dec 05 '21 at 06:00

score 1 · Answer 1 · answered Dec 17 '21 at 19:12

It is definitely possible in the way you've described - see my answer to a similar post here.

Maybe the difference here is that you're using an old Compose version? Make sure you're using version 1.0.1 or above for this to work as you expect. I assume you want this to take effect when you set your device in dark mode.

How to load the Dark drawable resource in Jetpack Compose?

1 Answers1