duckduckgo/iOS

Widget Colors are Broken in iOS 18 Accented Mode

jfebrian opened this issue · 1 comments

jfebrian commented

Summary
The DuckDuckGo iOS browser widgets display broken colors when the home screen is in Accented Widget mode on iOS 18. This majorly affects the usability of the widgets as it is no longer usable.

Screenshots

  1. Search Widget
    Screenshot 2024-10-28 at 23 17 28

  2. Passwords Widget
    Screenshot 2024-10-28 at 23 17 52

  3. Medium Favorites Widget
    Screenshot 2024-10-28 at 23 19 51

  4. Large Favorites Widget
    Screenshot 2024-10-28 at 23 20 21

  5. VPN Widget
    Screenshot 2024-10-28 at 23 18 24

Root Cause
On iOS 18, when users apply the accented theme on the home screen, all widgets will enter accented mode. In this mode, all SwiftUI Colors will be white by default, this also affects images. Now, Rectangle().fill() is used in most of the widgets, causing them to have a massive white square that makes them unusable. I have not confirmed this behavior in any Apple documentation, but based on my experimentation this is the case. I suspect that Apple wants to add colors on top of the white colors, and developers are required to adjust the opacity and rendering mode of the UI elements in the widgets.

Solution
Apple has provided two methods to solve this issue, widgetAccentable(_:) and widgetAccentedRenderingMode(_:). Complete information can be read on the documentation, but to explain it simply, here's what I found about the main functionality of those two methods:

  1. widgetAccentable(_:): We use this to decide whether a view and its children should be accented or not, note that the value set for this function in the parent view will override its children. However, what I found is that even if we set this to false, SwiftUI Color will still default to the white color as explained above. So we still need to play around with the opacity and accented for the widget to look good.
  2. widgetAccentedRenderingMode(_:): This one is more straightforward, it's to change the accented rendering mode for images. There are many different modes, I applied fullColor on most of the images to ensure there is no change in colors in the main images.

Results

I have prepared a branch in my forked repository to fix this issue. Please let me know if it's okay to create a pull request to this repository.

  1. Search Widget
    Screenshot 2024-10-28 at 23 37 53

  2. Passwords Widget
    Screenshot 2024-10-28 at 23 38 28

  3. Medium Favorites Widget
    Screenshot 2024-10-28 at 23 41 14

  4. Large Favorites Widget
    Screenshot 2024-10-28 at 23 40 43

  5. VPN Widget
    Screenshot 2024-10-28 at 23 38 50

Disclaimer
I found the issue when I was looking around the code base as I'm currently applying for a Senior iOS Engineer position in DDG. I did some minor cleanup of the SwiftUI code along the way to make it easier to read and maintain. Also, I'm not sure which colors or modes the designer would like, so I tried to keep everything as close as possible to the original design. Feedback is very much appreciated ^^

brindy commented

Hi,

Thanks for this, we're aware. Part of it is being blocked on using Xcode 16 in our Github CI (due to some test breakage, etc), but that is resolving soon so we should be able to fix this then.

Tracking internally at https://app.asana.com/0/715106103902962/1208407714247766/f

Good luck :)