Page MenuHomePhabricator

iOS13 [Feature] - Support Dark Mode
Closed, ResolvedPublicSpike

Assigned To
Authored By
NHarateh_WMF
Jul 2 2019, 6:04 PM
Referenced Files
F29923559: IMG_0010.jpg
Jul 31 2019, 8:57 PM
F29676700: IMG_0009.PNG
Jul 2 2019, 7:13 PM
F29676698: IMG_0010.PNG
Jul 2 2019, 7:13 PM
F29676702: IMG_0007.PNG
Jul 2 2019, 7:13 PM
F29676699: IMG_0006.PNG
Jul 2 2019, 7:13 PM
F29676701: IMG_0008.PNG
Jul 2 2019, 7:13 PM

Event Timeline

JMinor triaged this task as Medium priority.Jul 2 2019, 6:40 PM
JMinor subscribed.

Per our discussion to avoid having to hit the launch date, for now we'll use the "exclude us from theming" option. In early fall we'll do our full integrated support.

Here's some screenshots on how dark mode + windowing looks with our Black theme & messages screenshots for comparison.

IMG_0006.PNG (2×1 px, 604 KB)

IMG_0007.PNG (2×1 px, 610 KB)

IMG_0010.PNG (1×2 px, 2 MB)

IMG_0009.PNG (1×2 px, 581 KB)

IMG_0008.PNG (2×1 px, 661 KB)

LGoto subscribed.

As per discussion, waiting to build against 13.

One additional bug I notice after the Info.plist configuration:

Dark Mode & Dark theme - Settings > My Languages > Edit - reorder icon too dark.

IMG_0010.jpg (1×750 px, 144 KB)

Also note on this screenshot that dark theming looks odd with the new modal presentation. Settings title beneath kinda peeks up above but it just looks like a bug. You see a similar effect with iPad windowing (see screenshots above)

Tsevener renamed this task from Support iOS 13 dark mode to iOS13 [Feature] - Support Dark Mode.Aug 1 2019, 2:19 AM

The PR that excludes the app from dark mode was merged into the xcode_11 branch (https://github.com/wikimedia/wikipedia-ios/pull/3165).
Some system controls end up being too dark/light when there's a system/app theme mismatch.
The reorderControl caught by @Tsevener is not exposed via a public API so we can't adjust its tint color. Setting a custom editingAccessoryView results in not being able to drag & reorder items.

The PR that updates the app theme to match the system theme: https://github.com/wikimedia/wikipedia-ios/pull/3211
We should decide if system dark should be matched by our black/dark theme.

@cmadeo @JMinor it seems like there should be a setting to have the theme match the system theme and that should be the new default. This way, people who opt into the system dark mode will see the app in dark mode by default, and people who have changed their theme to sepia or dark will continue to see that theme. A "match system" setting will also allow users who opt into the "automatic" system theme setting (schedule for light/dark mode changes) to have the app change theme when the system changes theme.

From the meeting discussion:

  1. Theme popover remains the same, any selection selects a permanent theme
  2. "standard" theme becomes a match system theme setting. "Light" is added to the theme list in Settings, selecting anything but "Default" locks the theme to that setting, "Default" matches the system theme setting

Moving back into doing to handle the settings change

@JoeWalsh this is looking really good!
Just a two small notes:

  • When the device is in light mode and the app is in dark or black mode, I'm seeing the white splash screen flash before the dark one appears.
  • Design bug: even on the light and sepia mode, could we display the 'dim images' preview with the true black (#000) background, I think it's a bit confusing when nothing happens after the toggle.

When the device is in light mode and the app is in dark or black mode, I'm seeing the white splash screen flash before the dark one appears.

Does this persist after the device is restarted? I noticed this issue initially because the system caches the launch screen but it went away after I restarted the device

Design bug: even on the light and sepia mode, could we display the 'dim images' preview with the true black (#000) background, I think it's a bit confusing when nothing happens after the toggle.

Will do

@JoeWalsh restarting fixed the flashing, thanks!

Sorry to be this person, but could we actually do the paper background for dark instead of #000 for the preview, it looks a bit starker than I realized it would. Thanks @JoeWalsh

@cmadeo That's how I thought I implemented it - I'm seeing the paper background on dark & black themes. Are you seeing the black background when the dark theme is selected in build 1669?

@JoeWalsh, ah sorry to clarify: could we use the dark paper on default and sepia instead of the black?

@cmadeo sounds good - this change is applied in build 1670