Dark Mode Ins & Outs

Patrick shares with how to ready your app for iOS 13’s most popular feature.

Example App: https://github.com/mccarron/DarkSide

Links:

Apple WWDC Video + Dark Mode Docs
https://developer.apple.com/videos/play/wwdc2019/214/
https://developer.apple.com/documentation/xcode/supporting_dark_mode_in_your_interface

AppStore iOS 13 Adoption
https://developer.apple.com/support/app-store/

Great Tutorial
https://www.fivestars.blog/code/ios-dark-mode-how-to.html

Other Sources
https://9to5mac.com/2019/10/20/dark-mode-iphone-battery-life-test/
https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/
https://stackoverflow.com/questions/56546267/ios-13-disable-dark-mode-changes

Transcript

1. Dark Mode Ins & Outs Ready your app for iOS 13’s most popular feature Patrick McCarron M1 Finance @McCarron
2. WHY DARK MODE?
3. What is it?
4. iOS 13 Adoption High • 50% of all devices as of October 15th, which was < 30 days. (Source: Apple) • Users will ask you for it!
5. Users will ask you for it!
6. OLED Power Advantage • OLED screens on iPhone X, XS and 11 • Black is actually black on OLED • Can operate on the lowest brightness in a dark room • Looks better AND uses lower power (Image Source: 9to5Mac)
7. DON’T WANT TO SUPPORT IT?
8. Info.plist Disable For Whole App • Apple says: “Only a small subset of apps really should be dark all the time, and those are media-centric or content-creation apps“. • Can disable by setting UIUserInterfaceStyle in your Info.plist to Light • <key>UIUserInterfaceStyle</key> <string>Light</string>
9. Disable Per Item // On a view view.overrideUserInterfaceStyle = .light // Or… on your window! window?.overrideUserInterfaceStyle = .light
10. Disable Child Controller //Or a child view controller let forcedTraitCollection = UITraitCollection(userInterfaceStyle: .dark) setOverrideTraitCollection(forcedTraitCollection, forChild: vc)
11. TIPS FOR DESIGNING A DARK THEME
12. Apple’s Palette - Free Dark Mode Source: FiveStars' Color Playgrounds
13. Use Semantic Colors!
14. Notes On Battery Life • Pure black is NOT required. Dark gray is OKAY • White: ~1000mW • Pure Black: ~600mW • Dark Gray: ~610mW • (Source: XDA-Developers)
15. Do a Dark Icon Too!
16. THE EASY WAY (iOS 11+)
17. Asset Catalogs • Easy To Add Dark/Light Colors • High Contrast Too!
18. Dark Mode Images Easy Too! • Two image files, one per mode
19. DEMO TIME
20. THE ADVANCED WAY
21. Dynamic code for UIColors return UIColor { trait -> UIColor in if trait.userInterfaceStyle == .dark { return UIColor.black } return UIColor.white }
22. Dynamic code for UIColors w/ Helper public extension UIColor { static func dynamic(light: UIColor, dark: UIColor) -> UIColor { if #available(iOS 13, *) { return UIColor { trait -> UIColor in return trait.userInterfaceStyle == .dark ? dark : light } } return light } @nonobjc static var m1Text01: UIColor { return dynamic(light: UIColor.lightGray, dark: UIColor.darkGray) } }
23. Dynamic code for UIImage var image = UIImage(named: "yang") if #available(iOS 13, *), traitCollection.userInterfaceStyle == .dark { image = UIImage(named: "yin") } imageView.image = image
24. Dynamic code for UIImage w/ Helper public extension UIImageView { func setImage(light: UIImage, dark: UIImage) { if #available(iOS 13, *), traitCollection.userInterfaceStyle == .dark { image = dark } else { image = light } } }
25. NOW TO CONTROL IT
26. When To Do Colors? • Not in init or viewDidLoad • Best practice: traitCollectionDidChange unless you do it somewhere else • Apple’s suggestions:
27. When To Do Colors? didLoad Example
28. Trait Collection Did Change Example func setupColors() { backgroundView.layer.borderColor = UIColor.m1_ui_03.cgColor } public override func traitCollectionDidChange(_ previous: UITraitCollection?) { super.traitCollectionDidChange(previous) if #available(iOS 13, *), traitCollection.hasDifferentColorAppearance(comparedTo: previous), traitCollection.userInterfaceStyle != previous?.userInterfaceStyle { setupColors() } }
29. DEMO TIME
30. TESTING DARK MODE
31. Storyboards Live Toggle •
32. Simulator / Device Mode Setting(s) • Simulator Setting • Xcode Environment Override • Control Center (Device only)
33. Specialized Build Idea public extension UIColor { private static var kColorPostFix: String { // For testing Dark Mode colors in Debug builds #if DEBUG return "_DEBUG" #else return "" #endif } @nonobjc static var m1BackgroundPrimary: UIColor { return UIColor(named: "BackgroundPrimary\(kColorPostFix)")! } }
34. DEMO TIME
35. M1 Holdings Inc. provides a range of financial services through its opera\ng subsidiaries. M1 Finance LLC and M1 Spend LLC are wholly-owned subsidiaries of M1 Holdings Inc. and are separate but affiliated companies. M1 Finance LLC is a SEC registered broker-dealer and Member FINRA (www.finra.org) / SIPC (www.sipc.org). Investment products are not FDIC-insured, may lose value, and are no bank guarantee. Using margin involves risks: you can lose more than you deposit, you are subject to a margin call, and interest rates may change. The M1 Card is issued by Lincoln Savings Bank, Member FDIC, pursuant to a license from Visa U.S.A., and serviced by M1 Spend LLC. M1 Spend LLC is not a bank. Visa is a registered trademark of Visa Interna\onal Service Associa\on. All product and company names are trademarks™ or registered® trademarks of their respec\ve holders. Use of them does not imply any affilia\on with or endorsement by them. Telephone: 888-714-6674 Address: 213 W Ins\tute Pl, Ste. 301, Chicago, IL 60610 Thank You… Q+A?? Dark Mode Ins & Outs github.com/mccarron/DarkSide Patrick McCarron M1 Finance @McCarron