Apple iOS and iPadOS 18 "dark icon" support

[ZaLiTHkA]

with the changes that Apple announced for icons in iOS and iPadOS 18 the other day, I'm just wondering if there are any plans to update this asset generator to cater for this?

I suspect that, much like myself, many people are building hybrid mobile apps because we don't have access to a Mac for development... so while I've been able to use Android Studio to maintain my Android app icons, I cannot use Xcode to maintain iOS icons.

just for easy reference, the updated design specs for these icons can be seen here: https://developer.apple.com/design/human-interface-guidelines/app-icons/#Platform-considerations

[kerkenit]

+1

[Trystanr]

The iOS update just went live that supports dark mode icons. We would love an update on this to support dark mode.

[ZaLiTHkA]

@Trystanr I'm finally getting my hands on a 2020 MacBook Pro M1 soon, if not later this week, then probably next week.. I plan to use Xcode to generate these new icons and see how Apple have configured things, so I'll share that info when I have it.

armed with that, I'm hoping to help with the changes required to make this available to everyone else as well...

edit: (2 Oct 2024) quick update, just found out that I'll be getting my MacBook Pro on Friday, so I'll finally be able to look into this over the coming weekend.

[ZaLiTHkA]

ok, so... on a positive note, using iOS Simulator to test my current apps in iOS 18, I can safely say that no "special" modifications are necessary for iOS 18 to be able to tint app icons. it simply takes a greyscale version of the default icon, and applies the custom tint colour to anything "white" in the image.

unfortunately though, I cannot work out how to get the @capacitor/assets tool to handle the output of this additional app icon asset. I've been looking through the code for a few hours and now I'm more confused than when I started.

---

with that said, I have discovered a few things...

looking at the sample icons from this Figma file:

• the default "light" icon has no transparency, with a solid coloured background.
  • Icon-Light-1024x1024
• the "dark" icon has transparency, with no background behind the icon.
  • Icon-Dark-1024x1024
• the "tinted" icon has no transparency, with a black background behind the white icon.
  • Icon-Tinted-1024x1024

I tested these inside my test Xcode project and running in iOS Simulator I do see the correct icons when I switch between the "light", "dark" and "tinted" styles.

now the ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json file that this tool generates only contains a single "universal icon" entry, specifically as follows:

{
  "images": [
    {
      "filename": "[email protected]",
      "idiom": "universal",
      "platform": "ios",
      "size": "1024x1024"
    }
  ],
  "info": {
    "author": "xcode",
    "version": 1
  }
}

whereas the same file in a project created by Xcode defaults to three entries, as follows:

{
  "images" : [
    {
      "filename" : "Icon-Light-1024x1024.png",
      "idiom" : "universal",
      "platform" : "ios",
      "size" : "1024x1024"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "filename" : "Icon-Dark-1024x1024.png",
      "idiom" : "universal",
      "platform" : "ios",
      "size" : "1024x1024"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "tinted"
        }
      ],
      "filename" : "Icon-Tinted-1024x1024.png",
      "idiom" : "universal",
      "platform" : "ios",
      "size" : "1024x1024"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

as far as I can tell no other configuration changes are required to make tinted icons work in iOS 18. so for the moment at least, it seems that people without access to Xcode might need to configure these icon assets manually..

I'll keep digging, but I can't make any promises.

[sandstrom]

@markemer I know you've probably got a lot on your plate, but is dark mode icon support something Ionic will take a look at?

With iOS 18 rolling out now, where icons may be dark, it would be neat to support it.

[ThatOneCalculator]

@ZaLiTHkA can confirm that your solution works for our app! Thank you!