Creating Light and Dark Mode Icons using Icon Composer
This post is brought to you by Sentry, mobile monitoring considered "not bad" by 4 million developers.
Ah, new toys.
When Icon Composer was first announced, I thought, “Hey, here’s something that might help with my biggest blind spot in iOS development, making icons look somewhat okay.” Anything that helps the solo indie developer make an icon easier is fantastic news to me.
The biggest hang up? For the life of me, this thing is simplistic yet confusing at times. Making a unique icon for both light and dark mode was important for my upcoming app, Alyx. I finally figured out how, because if I can’t have Alyx with a sleep mask on when it’s dark mode — really, what do I even have anymore?
Here’s how it’s done:
1. Add all of the groups you want to use in totality. So, all of your layers (and their respective groups) for light and dark mode:
2. Now, select the individual layers that should be hidden in light mode — set their opacity to 0%:
3. Then, select the dark mode icon at the bottom of Icon Composer:
4. Finally, choose the individual layers that should be hidden in dark mode — set their opacity to 0%:
And that should do it. What really tripped me up was that I started by choosing a dark mode icon, and I thought, “Okay, it clearly says "Dark" here, so I’ll hide the light layers now.” But, going the other way was confusing to me — because you don’t select a “Light” toggle at that point. Instead, it’ll say “Default” with no option to choose or add anything else. What this is trying to say is “The changes here apply to light mode.”
The more you know.
Until next time ✌️