iOS 18: Dark Mode Icons

[dlewis23]

I have searched and made sure there are no existing issues for the issue I am filing

• I have searched the existing issues

Description

We should add support for Dark Mode and Tinted icons on iOS 18.

Solution

Need to add support from the contents.json in AppIcon.appiconset to add support for 2 more icon styles.

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

Alternatives

No response

Platforms

iOS

[hbugdoll]

I ended up here because of the following warning during build process:

[WARN] .../build/iphone/Assets.xcassets:./AppIcon.appiconset/[][universal][1024x1024][][][1x][][][][][2d][appicon-Dark.png]: warning: The app icon set "AppIcon" has 2 unassigned children.

Inspecting the generated Xcode project with Xcode itself shows that the two new icons (Dark and Tinted) are unassigned:

---

#14138 was not sufficient.

The two new icons have been added to iphone/iphone/Assets.xcassets/AppIcon.appiconset/Contents.json and iphone/layout/layout/Assets.xcassets/AppIcon.appiconset/Contents.json,
but build/iphone/Assets.xcassets/AppIcon.appiconset/Contents.json is dynamically created by writeAppIconSet() in _build.js and results in

    ...
    {
      "size": "1024x1024",
      "idiom": "universal",
      "filename": "appicon-Dark.png",
      "scale": "1x"
    },
    {
      "size": "1024x1024",
      "idiom": "universal",
      "filename": "appicon-Tinted.png",
      "scale": "1x"
    },
    ...

There are two problems:

1.) The relevant keys appearances and platform are missing for both icons:

      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : ...
        }
      ],
      "platform" : "ios",

This triggers the warning above.

2.) The two new icons appicon-Dark.png and appicon-Tinted.png are generated from default icon DefaultIcon.png
regardless of provided icons DefaultIcon-Dark.png and DefaultIcon-Tinted.png.

BTW the file name prefix appicon is automatically taken from <icon> in tiapp.xml (for both Android and iOS) and is the default setting.