iOS 18 dark mode icons (#14138)

* feat(ios): added support for iOS 18 dark mode icons * Update _build.js Update _build.js for dark mode icon support and so dark mode and tinted icon is not flatted against a white background. * Update iphone/cli/commands/_build.js Co-authored-by: Hans Knöchel <[email protected]> * Update iphone/cli/commands/_build.js Co-authored-by: Hans Knöchel <[email protected]> * fix: fix indentation --------- Co-authored-by: AbdullahFaqeir <[email protected]> Co-authored-by: Hans Knöchel <[email protected]>
tidev · Nov 29, 2024 · 8f201d9 · 8f201d9
1 parent 829d4ab
commit 8f201d9
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 32 deletions.
diff --git a/iphone/cli/commands/_build.js b/iphone/cli/commands/_build.js
@@ -5809,6 +5809,8 @@ iOSBuilder.prototype.createAppIconSetAndiTunesArtwork = async function createApp
 		'-76':          { height: 76,   width: 76,   scale: 1, idioms: [ 'ipad' ], required: true },
 		'-76@2x':       { height: 76,   width: 76,   scale: 2, idioms: [ 'ipad' ], required: true },
 		'-83.5@2x':     { height: 83.5, width: 83.5, scale: 2, idioms: [ 'ipad' ], minXcodeVer: '7.2' },
+		'-Dark':        { height: 1024, width: 1024, scale: 1, idioms: [ 'universal' ], required: true, minXcodeVer: '16.0' },
+		'-Tinted':      { height: 1024, width: 1024, scale: 1, idioms: [ 'universal' ], required: true, minXcodeVer: '16.0' },
 		'-Marketing':   { height: 1024, width: 1024, scale: 1, idioms: [ 'ios-marketing' ], required: true, minXcodeVer: '9.0' }
 	};
 	// Add macOS icons if target is macOS
@@ -5897,12 +5899,22 @@ iOSBuilder.prototype.createAppIconSetAndiTunesArtwork = async function createApp
 		let flatten = false;
 		if (pngInfo.alpha) {
 			if (defaultIcon && !defaultIconHasAlpha) {
-				this.logger.warn(__('Skipping %s because it has an alpha channel and generating one from %s', info.src.replace(this.projectDir + '/', ''), defaultIcon.replace(this.projectDir + '/', '')));
-				return;
+				if (filename === 'DefaultIcon-Dark.png' || filename === 'DefaultIcon-Tinted.png') {
+					// Do nothing
+				} else {
+					this.logger.warn(__('Skipping %s because it has an alpha channel and generating one from %s', info.src.replace(this.projectDir + '/', ''), defaultIcon.replace(this.projectDir + '/', '')));
+					return;
+				}
+			}
+
+			if (filename === 'DefaultIcon-Dark.png' || filename === 'DefaultIcon-Tinted.png') {
+				this.logger.warn(__('%s contains an alpha channel and will NOT BE flattened against a white background', info.src.replace(this.projectDir + '/', '')));
+				flatten = false;
+			} else {
+				this.logger.warn(__('%s contains an alpha channel and will be flattened against a white background', info.src.replace(this.projectDir + '/', '')));
+				flatten = true;
 			}
 
-			this.logger.warn(__('%s contains an alpha channel and will be flattened against a white background', info.src.replace(this.projectDir + '/', '')));
-			flatten = true;
 			flattenIcons.push(info);
 		}
 

diff --git a/iphone/iphone/Assets.xcassets/AppIcon.appiconset/Contents.json b/iphone/iphone/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -103,10 +103,34 @@
       "idiom" : "ios-marketing",
       "filename" : "appicon-1024.png",
       "scale" : "1x"
+    },
+    {
+         "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" : {
     "version" : 1,
     "author" : "xcode"
   }
-}
+}
diff --git a/iphone/layout/layout/Assets.xcassets/AppIcon.appiconset/Contents.json b/iphone/layout/layout/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,68 +1,117 @@
 {
   "images" : [
+    {
+      "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"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "60x60"
     },
     {
       "idiom" : "ipad",
-      "size" : "29x29",
-      "scale" : "1x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
       "idiom" : "ipad",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "1x",
+      "size" : "29x29"
     },
     {
       "idiom" : "ipad",
-      "size" : "40x40",
-      "scale" : "1x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
       "idiom" : "ipad",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "1x",
+      "size" : "40x40"
     },
     {
       "idiom" : "ipad",
-      "size" : "76x76",
-      "scale" : "1x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
       "idiom" : "ipad",
-      "size" : "76x76",
-      "scale" : "2x"
+      "scale" : "1x",
+      "size" : "76x76"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}