From 8f201d94bd13dc3a7c67ce850d11c828d2ca12e7 Mon Sep 17 00:00:00 2001 From: dlewis23 Date: Fri, 29 Nov 2024 10:27:28 -0500 Subject: [PATCH] iOS 18 dark mode icons (#14138) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Update iphone/cli/commands/_build.js Co-authored-by: Hans Knöchel * fix: fix indentation --------- Co-authored-by: AbdullahFaqeir Co-authored-by: Hans Knöchel --- iphone/cli/commands/_build.js | 20 +++- .../AppIcon.appiconset/Contents.json | 26 ++++- .../AppIcon.appiconset/Contents.json | 103 +++++++++++++----- 3 files changed, 117 insertions(+), 32 deletions(-) diff --git a/iphone/cli/commands/_build.js b/iphone/cli/commands/_build.js index 0dee04a1307..9866a4f2be3 100644 --- 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 index 973aa2af684..9e8bc4f3e7f 100644 --- 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" } -} \ No newline at end of file +} diff --git a/iphone/layout/layout/Assets.xcassets/AppIcon.appiconset/Contents.json b/iphone/layout/layout/Assets.xcassets/AppIcon.appiconset/Contents.json index 36d2c80d889..c7628d8b56a 100644 --- 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 } -} \ No newline at end of file +}