iOS 13: Dark Mode Support

Apple has developed a dark display mode that will be available on the new iPhone and iPhone from sept 19. Dark mode will feature on iOS 13 for iPhone, as well as iPadOS, a brand new operating system developed especially for iPad.

Apple says: Use Dark Mode on your iPhone, iPad, or iPod touch. Turn on Dark Mode for a great viewing experience especially in low-light environments.

What is dark mode?
Dark mode is a colour scheme that uses light-coloured text, icons, and graphical user interface elements on a dark background.

Why should you use it?
Dark Mode is ideally suited to low-light environments, where it not only stops you disturbing those around you with the light from your phone, but also helps to prevent eye strain.

How to stick with single InterfaceStyle (mode)?
If app is not compatible for both Dark and light mode or existing app does not support to Dark mode then we have to add a key in info.plist

<key>UIUserInterfaceStyle</key>
<string>Light</string>

How to Design iOS app with Dark mode support

1. Requirements: Xcode 11, iOS 13, macOS Catalina
2. Enable Dark mode
   a) Enable Dark mode in Xcode:
   Xcode > Preferences > General > Appearance > Dark
   b) Enable Dark mode in Simulator:
   Settings > Developer > Dark Appearance OR from “Environment Overrides” which is in top bar of Xcode console
   c) Enable Dark mode in iPhone: Settings > Display & Brightness > Appearance > Dark
3. Important Considerations
   a) Colors
   The color palette in Dark Mode includes darker background colors and lighter foreground colors that are carefully selected to ensure contrast while maintaining a consistent feel between modes.
   Give preference to system color, will save most of time.
   b) Image
   The system uses SF Symbols, which automatically look great in Dark Mode, and full-color images that are optimized for both light and dark appearances.
   Other fully colored images will not effect much in any mode. Please check this link for Human Interface Guidelines.
   c) For Embedded web content
   Declare supported color schemes with color-scheme, Use prefers-color-scheme media query for custom colors and image. Please check this for more information.
4. Example
   To understand Dark mode support I have created Simple Single View Application demo

Experiments 1: I have added a UILabel on storyboard, take IBOutlet, set text system text color i.e. Default(Label Color) than run the app on device and change light to dark and dark to light mode and observe that label text color changes black to white vice versa.

Note: if we set custom color it will not work.
System semantic color is available for iOS 13, Asset catalog color set is available since iOS 11. For backward compatibility we need to check iOS version every time.
if #available(iOS 13.0, *) {
    lblTitle.textColor = .systemBackground
} else {
   lblTitle.textColor = .white
}

Experiments 2: Added New Color Set in “Assets.xcassets” and name it TitleColor. it gives you three options- Any, Light and Dark Appearance, I have added Color Content “SystemGray6Color” to Light and “labelColor” to Dark.
Wrote code in viewDidLoad to set textColor to UILabel : lblTitle.textColor = UIColor(named: “TitleColor”)
run the app, change modes vice versa, Worked !! 👍

Note: New Image Set, Color Set gives its three Appearance option as Any, Light and Dark Appearance. we can change them in Attribute inspector to only Any or Any and Dark.
Any and Dark: in this case Any is works as Light mode

Experiments 3: To change image in different interface style I have Added New Image Set in “Assets.xcassets” and name it Profile, Appearance: Any, Dark. Scale: Single Scale (I am in hurry to test-it will work? 🏃 ).
Drag image view in storyboard and wrote code to show image in image view
imgView.image = UIImage(named: “profile”)
Run app in modes and observe for light mode it shows Man Profile image and in dark mode Women. 😁

Some remaining questions

How to change modes programmatically?

How to change current style?

Thank you, keep coding…