* [pve-devel] [PATCH pve_flutter_frontend v2 0/2] feat #6983: add dark and tint mode support for app icon
@ 2025-10-31 16:32 Shan Shaji
2025-10-31 16:32 ` [pve-devel] [PATCH pve_flutter_frontend v2 1/2] fix #6983: ios: allow dark and tint mode icon using icon composer file Shan Shaji
0 siblings, 1 reply; 2+ messages in thread
From: Shan Shaji @ 2025-10-31 16:32 UTC (permalink / raw)
To: pve-devel
Previously, the home screen customization that allows users to change
the light, dark, and tint options was not reflected in the app icon.
This was because no dark mode variant and tint variant was added in
the asset catalogue.
To support dark mode icons, the new App Icon Composer was used to
create icons for light, dark, and tint variants with liquid glass
support. The app icon now adapts dynamically based on the user’s
customization selection.
For older iOS versions the behavior would be the following:
> If your app supports previous releases (in the Minimum Deployments settings in the
> target’s General pane) that don’t have the same icon and widget style appearances
> and Liquid Glass material, Xcode automatically generates app icon images at build
> time for those releases from the Icon Composer file.
The above qouted paragraph is taken from apple's documentation [1]. Since
the composer file will be used for generating icons i have deleted
asset catalogue files as well.
The ticket #6983 [0] has also some other issues that needs to be addressed
which i will be sending as another patch series.
- [0] https://bugzilla.proxmox.com/show_bug.cgi?id=6983
- [1] https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer
Testing
=============
Verified the changes in Test Flight build 1.9.0(48). I have also tested
the changes in the following simulator devices as well:
- Iphone 16e (iOS 18.5)
- Iphone 16e (iOS 26.0.1)
- Ipad Air 11-inch (iOS 26.0)
- Ipad Air 11 (iOS 18.5)
changes since v1:
- Moved the .icon file to Runner folder from the iOS folder.
Shan Shaji (2):
fix #6983: ios: allow dark and tint mode icon using icon composer file
chore: ios: delete asset catalogue files in favor of icon composer
file
ios/Runner.xcodeproj/project.pbxproj | 11 +-
ios/Runner/AppIcon.icon/Assets/dark.svg | 6 +
ios/Runner/AppIcon.icon/Assets/light.svg | 6 +
ios/Runner/AppIcon.icon/icon.json | 52 ++++++++
.../AppIcon.appiconset/Contents.json | 122 ------------------
.../Icon-App-1024x1024@1x.png | Bin 126022 -> 0 bytes
.../AppIcon.appiconset/Icon-App-20x20@1x.png | Bin 692 -> 0 bytes
.../AppIcon.appiconset/Icon-App-20x20@2x.png | Bin 2050 -> 0 bytes
.../AppIcon.appiconset/Icon-App-20x20@3x.png | Bin 3321 -> 0 bytes
.../AppIcon.appiconset/Icon-App-29x29@1x.png | Bin 1425 -> 0 bytes
.../AppIcon.appiconset/Icon-App-29x29@2x.png | Bin 3367 -> 0 bytes
.../AppIcon.appiconset/Icon-App-29x29@3x.png | Bin 5147 -> 0 bytes
.../AppIcon.appiconset/Icon-App-40x40@1x.png | Bin 2050 -> 0 bytes
.../AppIcon.appiconset/Icon-App-40x40@2x.png | Bin 4699 -> 0 bytes
.../AppIcon.appiconset/Icon-App-40x40@3x.png | Bin 7470 -> 0 bytes
.../AppIcon.appiconset/Icon-App-60x60@2x.png | Bin 7470 -> 0 bytes
.../AppIcon.appiconset/Icon-App-60x60@3x.png | Bin 11744 -> 0 bytes
.../AppIcon.appiconset/Icon-App-76x76@1x.png | Bin 4378 -> 0 bytes
.../AppIcon.appiconset/Icon-App-76x76@2x.png | Bin 9529 -> 0 bytes
.../Icon-App-83.5x83.5@2x.png | Bin 1418 -> 0 bytes
20 files changed, 73 insertions(+), 124 deletions(-)
create mode 100644 ios/Runner/AppIcon.icon/Assets/dark.svg
create mode 100644 ios/Runner/AppIcon.icon/Assets/light.svg
create mode 100644 ios/Runner/AppIcon.icon/icon.json
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
delete mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 2+ messages in thread
* [pve-devel] [PATCH pve_flutter_frontend v2 1/2] fix #6983: ios: allow dark and tint mode icon using icon composer file
2025-10-31 16:32 [pve-devel] [PATCH pve_flutter_frontend v2 0/2] feat #6983: add dark and tint mode support for app icon Shan Shaji
@ 2025-10-31 16:32 ` Shan Shaji
0 siblings, 0 replies; 2+ messages in thread
From: Shan Shaji @ 2025-10-31 16:32 UTC (permalink / raw)
To: pve-devel
Previously, the home screen customization that allows users to change
the light, dark, and tint options was not reflected in the app icon.
This was because no dark mode variant and tint variant was added in
the asset catalogue.
To support dark mode icons, the new App Icon Composer [0][1] was used to
create icons for light, dark, and tint variants with liquid glass
support. The app icon now adapts dynamically based on the user’s
customization selection.
- [0] https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer
- [1] https://developer.apple.com/design/Human-Interface-Guidelines/app-icons
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
changes since v1:
- Move .icon file to Runner folder from iOS folder.
ios/Runner.xcodeproj/project.pbxproj | 11 ++++-
ios/Runner/AppIcon.icon/Assets/dark.svg | 6 +++
ios/Runner/AppIcon.icon/Assets/light.svg | 6 +++
ios/Runner/AppIcon.icon/icon.json | 52 ++++++++++++++++++++++++
4 files changed, 73 insertions(+), 2 deletions(-)
create mode 100644 ios/Runner/AppIcon.icon/Assets/dark.svg
create mode 100644 ios/Runner/AppIcon.icon/Assets/light.svg
create mode 100644 ios/Runner/AppIcon.icon/icon.json
diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj
index 55c1ef2..376b910 100644
--- a/ios/Runner.xcodeproj/project.pbxproj
+++ b/ios/Runner.xcodeproj/project.pbxproj
@@ -8,9 +8,10 @@
/* Begin PBXBuildFile section */
1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
+ 1BE02BA02EB5028D00B28B3B /* AppIcon.icon in Resources */ = {isa = PBXBuildFile; fileRef = 1BE02B9F2EB5028D00B28B3B /* AppIcon.icon */; };
331C808B294A63AB00263BE5 /* RunnerTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 331C807B294A618700263BE5 /* RunnerTests.swift */; };
3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; };
- 4836010C0B2A8DFC7ADE053C /* Pods_RunnerTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 6081BAE21F8C60EA7EAB26FD /* Pods_RunnerTests.framework */; };
+ 4836010C0B2A8DFC7ADE053C /* Pods_RunnerTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 6081BAE21F8C60EA7EAB26FD /* Pods_RunnerTests.framework */; };
74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; };
8C7C24F07B98241FA8D778AF /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = EA38A3EBA0525C87E550408B /* Pods_Runner.framework */; };
97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; };
@@ -46,6 +47,7 @@
022505048A677FEA7AF056D1 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = "<group>"; };
1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
+ 1BE02B9F2EB5028D00B28B3B /* AppIcon.icon */ = {isa = PBXFileReference; lastKnownFileType = folder.iconcomposer.icon; path = AppIcon.icon; sourceTree = "<group>"; };
3158807C4D56CFC909080136 /* Pods-RunnerTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RunnerTests.debug.xcconfig"; path = "Target Support Files/Pods-RunnerTests/Pods-RunnerTests.debug.xcconfig"; sourceTree = "<group>"; };
331C807B294A618700263BE5 /* RunnerTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RunnerTests.swift; sourceTree = "<group>"; };
331C8081294A63A400263BE5 /* RunnerTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RunnerTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -105,7 +107,6 @@
AC472FA6D8351F0705955D12 /* Pods-RunnerTests.release.xcconfig */,
DDCC44C824C06CEA801DA131 /* Pods-RunnerTests.profile.xcconfig */,
);
- name = Pods;
path = Pods;
sourceTree = "<group>";
};
@@ -144,6 +145,7 @@
97C146F01CF9000F007C117D /* Runner */ = {
isa = PBXGroup;
children = (
+ 1BE02B9F2EB5028D00B28B3B /* AppIcon.icon */,
97C146FA1CF9000F007C117D /* Main.storyboard */,
97C146FD1CF9000F007C117D /* Assets.xcassets */,
97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */,
@@ -264,6 +266,7 @@
3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */,
97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */,
97C146FC1CF9000F007C117D /* Main.storyboard in Resources */,
+ 1BE02BA02EB5028D00B28B3B /* AppIcon.icon in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -278,10 +281,14 @@
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist",
);
+ inputPaths = (
+ );
name = "[CP] Embed Pods Frameworks";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist",
);
+ outputPaths = (
+ );
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n";
diff --git a/ios/Runner/AppIcon.icon/Assets/dark.svg b/ios/Runner/AppIcon.icon/Assets/dark.svg
new file mode 100644
index 0000000..5c58b76
--- /dev/null
+++ b/ios/Runner/AppIcon.icon/Assets/dark.svg
@@ -0,0 +1,6 @@
+<svg width="869" height="754" viewBox="0 0 869 754" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M649.013 376.577L869 618.3C844.814 643.287 810.986 658.61 773.905 658.61C734.42 658.61 699.767 641.684 675.604 615.093L553.918 481.337L458.846 376.577L553.918 272.619L675.604 138.863C699.767 112.272 734.42 95.3468 773.905 95.3468C810.986 95.3468 844.814 110.646 869 134.832L649.013 376.577Z" fill="#E57000"/>
+<path d="M219.964 376.577L0 618.3C24.1631 643.287 58.0143 658.61 95.0948 658.61C134.557 658.61 169.21 641.684 193.396 615.093L315.059 481.337L410.154 376.577L315.059 272.619L193.396 138.863C169.21 112.272 134.557 95.3468 95.0948 95.3468C58.0143 95.3468 24.1631 110.646 0 134.832L219.964 376.577Z" fill="#E57000"/>
+<path d="M521.166 496.431L434.386 400.809L347.582 496.431L146.811 717.082C168.867 739.138 199.763 753.132 233.592 753.132C269.619 753.132 299.782 738.405 322.594 713.394L434.386 591.319L545.444 713.394C567.5 737.672 599.13 753.132 635.157 753.132C669.008 753.132 699.881 739.138 721.96 717.082L521.166 496.431Z" fill="white"/>
+<path d="M521.166 256.701L434.385 352.323L347.582 256.701L146.811 36.0499C168.867 13.9711 199.763 0 233.592 0C269.619 0 299.782 14.7269 322.571 39.7145L434.385 161.812L545.421 39.7145C567.5 15.4598 599.129 0 635.156 0C668.985 0 699.881 13.9711 721.937 36.0499L521.166 256.701Z" fill="white"/>
+</svg>
diff --git a/ios/Runner/AppIcon.icon/Assets/light.svg b/ios/Runner/AppIcon.icon/Assets/light.svg
new file mode 100644
index 0000000..ec0d6d3
--- /dev/null
+++ b/ios/Runner/AppIcon.icon/Assets/light.svg
@@ -0,0 +1,6 @@
+<svg width="869" height="754" viewBox="0 0 869 754" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M649.013 376.577L869 618.3C844.814 643.287 810.986 658.61 773.905 658.61C734.42 658.61 699.767 641.684 675.604 615.093L553.918 481.337L458.846 376.577L553.918 272.619L675.604 138.863C699.767 112.272 734.42 95.3468 773.905 95.3468C810.986 95.3468 844.814 110.646 869 134.832L649.013 376.577Z" fill="#E57000"/>
+<path d="M219.964 376.577L0 618.3C24.1631 643.287 58.0143 658.61 95.0948 658.61C134.557 658.61 169.21 641.684 193.396 615.093L315.059 481.337L410.154 376.577L315.059 272.619L193.396 138.863C169.21 112.272 134.557 95.3468 95.0948 95.3468C58.0143 95.3468 24.1631 110.646 0 134.832L219.964 376.577Z" fill="#E57000"/>
+<path d="M521.166 496.431L434.386 400.809L347.582 496.431L146.811 717.082C168.867 739.138 199.763 753.132 233.592 753.132C269.619 753.132 299.782 738.405 322.594 713.394L434.386 591.319L545.444 713.394C567.5 737.672 599.13 753.132 635.157 753.132C669.008 753.132 699.882 739.138 721.96 717.082L521.166 496.431Z" fill="black"/>
+<path d="M521.166 256.701L434.386 352.323L347.582 256.701L146.811 36.0499C168.867 13.9711 199.763 0 233.592 0C269.619 0 299.782 14.7269 322.571 39.7145L434.386 161.812L545.421 39.7145C567.5 15.4598 599.13 0 635.157 0C668.985 0 699.881 13.9711 721.937 36.0499L521.166 256.701Z" fill="black"/>
+</svg>
diff --git a/ios/Runner/AppIcon.icon/icon.json b/ios/Runner/AppIcon.icon/icon.json
new file mode 100644
index 0000000..8894b59
--- /dev/null
+++ b/ios/Runner/AppIcon.icon/icon.json
@@ -0,0 +1,52 @@
+{
+ "fill" : "system-light",
+ "groups" : [
+ {
+ "blur-material" : null,
+ "layers" : [
+ {
+ "blend-mode-specializations" : [
+ {
+ "appearance" : "dark",
+ "value" : "normal"
+ }
+ ],
+ "glass" : true,
+ "hidden" : false,
+ "image-name-specializations" : [
+ {
+ "value" : "light.svg"
+ },
+ {
+ "appearance" : "dark",
+ "value" : "dark.svg"
+ }
+ ],
+ "name" : "layer1 1",
+ "position" : {
+ "scale" : 0.9,
+ "translation-in-points" : [
+ 0,
+ 0
+ ]
+ }
+ }
+ ],
+ "shadow" : {
+ "kind" : "layer-color",
+ "opacity" : 0.5
+ },
+ "specular" : true,
+ "translucency" : {
+ "enabled" : true,
+ "value" : 0.2
+ }
+ }
+ ],
+ "supported-platforms" : {
+ "circles" : [
+ "watchOS"
+ ],
+ "squares" : "shared"
+ }
+}
\ No newline at end of file
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2025-10-31 16:32 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-10-31 16:32 [pve-devel] [PATCH pve_flutter_frontend v2 0/2] feat #6983: add dark and tint mode support for app icon Shan Shaji
2025-10-31 16:32 ` [pve-devel] [PATCH pve_flutter_frontend v2 1/2] fix #6983: ios: allow dark and tint mode icon using icon composer file Shan Shaji
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox