Skip to Content (Press Enter)
2021-05-19 09-23-34
André Henriques
68Views
2Comments
How to have a different app icon based on the user device dark mode enable/disable?
Question
Mobile

In a native mobile application, how can I have an icon for when the user device uses light mode and another one for when it's dark mode?

I know that sometimes iOS automatically adapts the app icon, but other times depending on the image, the same doesn't happen. What are the image requirements for adapting to light and dark modes?

Note: to implement the app image/icon, I'm following the OS recommended steps based on the how to modify the app icon article.

0
0
02 Dec 2024
Copy Link
2025-09-25 14-38-22
Lokesh Kumar Yadav

To have separate icons for light and dark modes in a native mobile application:

  1. iOS Requirements:

    • Use Asset Catalogs to provide light and dark mode versions of the app icon.
    • Add the Appearance attribute in your Contents.json file within the app icon's asset folder.
    • Define Light and Dark images under the Images.xcassets directory.

  2. Android Requirements:

    • Create two sets of icons in res/drawable and res/drawable-night folders.
    • Android will automatically use the icons in the drawable-night folder when the system is in dark mode.
0
1
26 Jan 2025
Copy Link
2016-04-22 00-29-45
Nuno Reis
 
MVP

Hello Lokesh.

Have you tried this in OutSystems? When the question showed up, I did a search and couldn't find a guaranteed system to do this.

0
0
26 Jan 2025
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.