About Dark Mode

Noritomo Inaba
WWDC19 Recap at LINE
https://line.connpass.com/event/134346/

Transcript

1. Dark Modeͷڑ཭ײ Noritomo Inaba, Dev Center 3
2. Dark Mode iPhoneͷ υϥϚνοΫͳ ৽͍͠දࣔํ๏
3. Dark Mode ▸ γεςϜશମͱ͢΂ͯͷΞϓϦͷ ֎؍͕Dark Colorͷ഑৭ʹͳΔ ▸ ҉Ίͷ৔ॴͰͷݟ΍͕͢͞ࡍཱͭ ▸ iOS 13ͰAPI͕௥Ճ͞Εͨ
4. Dark Mode ▸ ͢΂ͯͷΞϓϦ͕Dark Modeʹ ରԠ͢Δ΂͖ https://developer.apple.com/videos/play/wwdc2019/808/
5. Dark Mode ▸ iOS 13ͰDark ModeΛ௥Ճ͠ɺ ૉ੖Β͍͠UIΛ࡞ͬͨ ▸ ·ͬͨ͘৽͍͠iOSͷσβΠϯ ▸ ࣍͸͋ͳͨͷ൪Ͱ͢ https://developer.apple.com/videos/play/wwdc2019/214/
6. Dark Mode ▸ iOSͷ৽͍͠σβΠϯγεςϜʹҠߦ͢Δ͜ͱ ▸ Ұ؏ੑͷ͋ΔσβΠϯ ▸ Ϣʔβʔ͕໎ΘͣʹΞϓϦΛ࢖͑Δ ▸ ΑΓ਌͠Έ΍͘͢ͳΔ ▸ ΑΓཧղ͠΍͘͢ͳΔ
7. Dark Mode ▸ 3ͭͷϙΠϯτ ▸ Color ▸ Materials ▸ Views and Controls
8. Dark Mode Color ▸ Color͕࠷΋ॏཁ ▸ ColorΛ੍͢Δऀ͸ Dark ModeΛ੍͢!!
9. Dark Mode - Color UIColor (iOS 12) ▸ System Colors ▸ Predefined Color
10. Dark Mode - Color UIColor (iOS 12) ▸ System Colors ▸ .darkText ▸ .lightText ▸ .groupTableViewBackground
11. Dark Mode - Color UIColor (iOS 12) ▸ Predefined Color ▸ .red ▸ .orange ▸ .yellow ▸ etc…
12. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ UIElement Colors
13. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ Adaptable Colors ▸ Adaptable Gray Colors ▸ Transparent Color ▸ Fixed Colors
14. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ Adaptable Colors ▸ .systemRed ▸ .systemOrange ▸ .systemYellow ▸ etc…
15. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ Adaptable Gray Colors ▸ .systemGray ▸ .systemGray2 ▸ .systemGray3 ▸ .systemGray4 ▸ .systemGray5 ▸ .systemGray6
16. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ Transparent Color ▸ .clear
17. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ Fixed Colors ▸ .red ▸ .orange ▸ .yellow ▸ etc…
18. Dark Mode - Color UIColor (iOS 13) ▸ Standard Colors ▸ UIElement Colors
19. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Label Colors ▸ Fill Colors ▸ Text Colors ▸ Standard Content Background Colors ▸ Grouped Content Background Colors ▸ Separator Colors ▸ Link Color ▸ Nonadaptable Colors ▸ Deprecated Colors
20. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Label Colors ▸ .label ▸ .secondaryLabel ▸ .tertiaryLabel ▸ .quaternaryLabel
21. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Fill Colors ▸ .systemFill ▸ .secondarySystemFill ▸ .tertiarySystemFill ▸ .quaternarySystemFill
22. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Text Colors ▸ .placeholderText
23. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Standard Content Background Colors ▸ .systemBackground ▸ .secondarySystemBackground ▸ .tertiarySystemBackground
24. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Grouped Content Background Colors ▸ .systemGroupedBackground ▸ .secondarySystemGroupedBackgro und ▸ .tertiarySystemGroupedBackground
25. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Separator Colors ▸ .separator ▸ .opaqueSeparator
26. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Link Color ▸ .link
27. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Nonadaptable Colors ▸ .darkText ▸ .lightText
28. Dark Mode - Color UIColor (iOS 13) ▸ UIElement Colors ▸ Deprecated Colors ▸ .groupTableViewBackground [Deprecated]
29. Dark Mode - Color UIColor (iOS 12) ▸ System Colors ▸ Predefined Color UIColor (iOS 13) ▸ Standard Colors ▸ Adaptable Colors ▸ Adaptable Gray Colors ▸ Transparent Color ▸ Fixed Colors ▸ UIElement Colors ▸ Label Colors ▸ Fill Colors ▸ Text Colors ▸ Standard Content Background Colors ▸ Grouped Content Background Colors ▸ Separator Colors ▸ Link Color ▸ Nonadaptable Colors ▸ Deprecated Colors
30. Dark Mode - Color UIColor (iOS 13) ▸ ৽͘͠௥Ճ͞ΕͨSystem Color͸ DynamicʹมԽ͢Δ ▸ Light Mode / Dark Mode https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
31. Dark Mode - Color UIColor (iOS 13) ▸ ৽͘͠௥Ճ͞ΕͨSystem Color͸ DynamicʹมԽ͢Δ ▸ Light Mode / Dark Mode / ????? / ????? https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
32. Dark Mode - Color UIColor (iOS 13) ▸ Light Mode / Dark Modeͷ 2छྨͰ͸ͳ͍ ▸ Accessibilityͷ ʮίϯτϥετΛ্͛Δʯ ͷ஋΋औΕΔΑ͏ʹͳͬͨ
33. Dark Mode - Color UIColor (iOS 13) ▸ Light Mode / Contrast Normal ▸ Light Mode / Contrast High ▸ Dark Mode / Contrast Normal ▸ Dark Mode / Contrast High https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
34. Dark Mode - Color ͜͜·Ͱͷ·ͱΊ ▸ ৭Λࢦఆ͍ͯ͠ΔՕॴΛ Dynamic Colorʹஔ͖׵͑Δ ▸ 1৭ʹ͖ͭ4ύλʔϯ༻ҙ͢Δ Light Mode / Dark Mode Contrast Normal / Contrast High
35. Dark Mode - Color UIColor (iOS 13) ▸ System Color͚ͩΛ࢖༻͍ͯ͠Δɹ ΞϓϦ͸গͳ͍ ▸ ΞϓϦͷσβΠϯʹ߹Θͤͯ Custom ColorΛ࢖༻͢Δ͜ͱ͕ଟ͍ ▸ DynamicͳCustom ColorΛ࡞Δ
36. Dark Mode - Color Custom Dynamic Color ▸ Ͳ͏΍ͬͯ࡞Δʁ ▸ Asset Catalog ▸ CodeͰॻ͘ ▸ e.g. marigold ͱ͍͏ Custom Dynamic ColorΛ௥Ճ͢Δ
37. Dark Mode - Color Custom Dynamic Color - Asset Catalog ▸ File -> New -> File… ▸ iOS -> Resource -> Asset Catalog -> Create ▸ Add New Color Set ▸ Show Attributes Inspector ▸ Appearances -> Any, Dark ▸ Check High Contrast ▸ Set Color
38. Dark Mode - Color Custom Dynamic Color - Code extension UIColor { @available(iOS 13.0, *) public init(dynamicProvider: @escaping (UITraitCollection) -> UIColor) }
39. Dark Mode - Color Custom Dynamic Color - Code class var marigold: UIColor { return UIColor { (traitCollection: UITraitCollection) -> UIColor in switch (traitCollection.userInterfaceStyle ,traitCollection.accessibilityContrast) { case (.dark, .high): return .darkWithHighMarigold case (.dark, _): return .darkWithNormalMarigold case (_, .high): return .lightWithHighMarigold case (_, _): return .lightWithNormalMarigold } } }
40. Dark Mode Image ▸ Image΋Colorͱ΄΅ಉ͡ ▸ Dynamicʹ͢Δ ▸ Asset Catalog ▸ CodeͰॻ͘
41. Dark Mode - Image Custom Dynamic Image - Asset Catalog ▸ (File -> New -> File… ▸ iOS -> Resource -> Asset Catalog -> Create) ▸ Add New Image Set ▸ Show Attributes Inspector ▸ Appearances -> Any, Dark ▸ Check High Contrast ▸ Set Image
42. Dark Mode - Image Custom Dynamic Image - Asset Catalog https://developer.apple.com/documentation/uikit/uiimage/providing_images_for_different_appearances
43. Dark Mode - Image Custom Dynamic Image - Code // Image Set let traitCollection = view.traitCollection let image = UIImage(named: "marigold", in: nil, compatibleWith: traitCollection) // Template Image let imageView = UIImageView(image: iconImage) imageView.tintColor = .marigold // SF Symbols let photoImage = UIImage(systemName: "photo")
44. Dark Mode Material ▸ UIBlurEffect.Style ▸ Colorͱಉ༷ʹɹɹɹɹɹɹɹ API͕ଟ਺௥Ճ͞Εͨ ▸ UIVibrancyEffectStyle (iOS 13͔Β)
45. Dark Mode - Material UIBlurEffect.Style (iOS 12) ▸ Constants
46. Dark Mode - Material UIBlurEffect.Style (iOS 12) ▸ Constants ▸ .extraLight ▸ .light ▸ .dark ▸ .extraDark ▸ .regular ▸ .prominent
47. Dark Mode - Material UIBlurEffect.Style (iOS 13) ▸ Adaptable Styles ▸ Light Styles ▸ Dark Styles ▸ Additional Styles
48. Dark Mode - Material UIBlurEffect.Style (iOS 13) ▸ Adaptable Styles ▸ .systemUltraThinMaterial ▸ .systemThinMaterial ▸ .systemMaterial ▸ .systemThickMaterial ▸ .systemChromeMaterial
49. Dark Mode - Material UIBlurEffect.Style (iOS 13) ▸ Light Styles ▸ .systemUltraThinMaterialLight ▸ .systemThinMaterialLight ▸ .systemMaterialLight ▸ .systemThickMaterialLight ▸ .systemChromeMaterialLight
50. Dark Mode - Material UIBlurEffect.Style (iOS 13) ▸ Dark Styles ▸ .systemUltraThinMaterialDark ▸ .systemThinMaterialDark ▸ .systemMaterialDark ▸ .systemThickMaterialDark ▸ .systemChromeMaterialDark
51. Dark Mode - Material UIBlurEffect.Style (iOS 13) ▸ Additional Styles ▸ .extraLight ▸ .light ▸ .dark ▸ .extraDark ▸ .regular ▸ .prominent
52. Dark Mode - Material UIBlurEffect.Style (iOS 12) ▸ Constants UIBlurEffect.Style (iOS 13) ▸ Adaptable Styles ▸ Light Styles ▸ Dark Styles ▸ Additional Styles
53. Dark Mode - Material UIVibrancyEffectStyle (iOS 13) ▸ Label Styles ▸ Fill Styles ▸ Separator Style
54. Dark Mode - Material UIVibrancyEffectStyle (iOS 13) ▸ Label Styles ▸ .label ▸ .secondaryLabel ▸ .tertiaryLabel ▸ .quaternaryLabel
55. Dark Mode - Material UIVibrancyEffectStyle (iOS 13) ▸ Fill Styles ▸ .fill ▸ .secondaryFill ▸ .tertiaryFill
56. Dark Mode - Material UIVibrancyEffectStyle (iOS 13) ▸ Separator Style ▸ .separator
57. Dark Mode - Material Material - Code let vibrancyEffect = UIVibrancyEffect(blurEffect: .init(style: .systemThinMaterial), style: .fill) let visualEffectView = UIVisualEffectView(effect: vibrancyEffect)
58. Dark Mode Views and Controls ▸ UIView ▸ UIViewController ▸ UITraitCollection ‣ ͳͲʹAPI௥Ճ͋Γ ▸ ඞཁʹԠ࣮ͯ͡૷͢Δ
59. Dark Mode - Views and Controls Update Custom View UIView UIViewController UIPresentationController traitCollectionDidChange(_:) layoutSubviews() draw(_:) updateConstraints() tintColorDidChange() traitCollectionDidChange(_:) updateViewConstraints() viewWillLayoutSubviews() viewDidLayoutSubviews() traitCollectionDidChange(_:) containerViewWillLayoutSubviews() containerViewDidLayoutSubviews()
60. Dark Mode - Views and Controls Update Custom View extension UIView { @available(iOS 13.0, *) open var overrideUserInterfaceStyle: UIUserInterfaceStyle }
61. Dark Mode - Views and Controls Update Custom View https://developer.apple.com/videos/play/wwdc2019/214/
62. Dark Mode - Views and Controls Update Custom View https://developer.apple.com/videos/play/wwdc2019/214/
63. Dark Mode - Views and Controls Views and Controls ▸ ҰׅͰDark ModeΛΦϑʹ͢Δ (ΦϓτΞ΢τ) ▸ Info.plist key ▸ <key>UIUserInterfaceStyle</key> ▸ <string>Light</string> ▸ ※ Dark ModeରԠதͷҰ࣌తͳ༻్
64. Dark Mode - Views and Controls Views and Controls ▸ UIStatusBarStyle ▸ .default ▸ .lightContent ▸ .darkContent [New]
65. Dark Mode - Views and Controls Views and Controls ▸ UIActivityIndicatorView.Style ▸ .whiteLarge [Deprecated] ▸ .white [Deprecated] ▸ .gray [Deprecated] ▸ .large [New] ▸ .medium [New]
66. Dark Mode - Views and Controls Views and Controls ▸ UIKeyboardAppearance ▸ UIScrollView.IndicatorStyle ▸ APIมߋͳ͠ ▸ UIBarStyle ▸ .blackOpaque [Deprecated] ▸ .blackTranslucent [Deprecated] ▸ API௥Ճͳ͠
67. Dark Mode Question
68. Dark Mode Question ▸ ͢΂ͯͷΞϓϦ͕Dark Modeʹ ରԠ͢Δ΂͖
69. Dark Mode Question ▸ ͋ͳͨͷΞϓϦͷ iOS Deployment Target͸ ͍ͭ͘Ͱ͔͢…ʁ
70. Dark Mode Question ▸ iOS 12 ▸ iOS 11 ▸ iOS 10 ▸ ͷDark ModeରԠ͠·͔͢ʁ
71. Dark Mode Less Than iOS 13 ▸ Dynamic Color΍Dynamic Image͸Asset CatalogͰఆٛͨ͠΄͏͕ݟ௨͕͠ྑͦ͞͏ ▸ ͨͩ͠ɺAsset CatalogͷColorSet͸ Xcode 9 / iOS 11͔Β ▸ CodeͰॻ͔͘͠ͳ͍
72. Dark Mode Less Than iOS 13
73. Dark Mode Less Than iOS 13 ▸ Dark ModeରԠ͸ख͕͔͔ؒΓͦ͏ ▸ ૿͑ա͗ͨCustom Color΍Imageͷ ؅ཧʹடংΛ΋ͨΒ͢Մೳੑ ▸ ͋Δ͍͸͞ΒͳΔࠞಱΛট͘
74. Dark Mode Less Than iOS 13 ▸సੜͨ͠Β Dark Modeͩͬͨ ▸ ͘Β͍ͷؾ࣋ͪͰ΍Δ͔͠ͳ͍͔ͳͱ
75. [PR] LINEϚϯΨ͸Dark ModeରԠࡁΈ
76. Dark Mode - Color Custom Dynamic Color - Code (Less Than iOS 13) class var marigold: UIColor { if #available(iOS 13.0, *) { return UIColor { (traitCollection: UITraitCollection) -> UIColor in switch (traitCollection.userInterfaceStyle, traitCollection.accessibilityContrast) { case (.dark, .high): return .darkWithHighMarigold case (.dark, _): return .darkWithNormalMarigold case (_, .high): return .lightWithHighMarigold case (_, _): return .lightWithNormalMarigold } } } else { if isDarkMode { return .darkWithNormalMarigold } else { return .lightWithNormalMarigold } } }
77. Wrap Up ▸ Ϟνϕʔγϣϯߴͯ͘͠ Dark ModeʹऔΓ૊Έ· ͠ΐ͏ ▸ ࣍͸͋ͳͨͷ൪Ͱ͢
78. More Information WWDC19 Sessions ▸ What's New in iOS Design ▸ https://developer.apple.com/ videos/play/wwdc2019/808/ ▸ Implementing Dark Mode on iOS ▸ https://developer.apple.com/ videos/play/wwdc2019/214/
79. More Information Human Interface Guidelines ▸ Color ▸ https://developer.apple.com/design/human-interface-guidelines/ios/visual- design/color/ ▸ Dark Mode ▸ https://developer.apple.com/design/human-interface-guidelines/ios/visual- design/dark-mode/ ▸ Materials ▸ https://developer.apple.com/design/human-interface-guidelines/ios/visual- design/materials/ ▸ Color and Contrast ▸ https://developer.apple.com/design/human-interface-guidelines/accessibility/ overview/color-and-contrast/
80. More Information API Documentation ▸ Supporting Dark Mode in Your Interface ▸ https://developer.apple.com/documentation/appkit/ supporting_dark_mode_in_your_interface ▸ Choosing a Specific Interface Style for Your iOS App ▸ https://developer.apple.com/documentation/appkit/ supporting_dark_mode_in_your_interface/ choosing_a_specific_interface_style_for_your_ios_app ▸ Providing Images for Different Appearances ▸ https://developer.apple.com/documentation/uikit/uiimage/ providing_images_for_different_appearances
81. More Information API Documentation ▸ iOS Keys ▸ https://developer.apple.com/library/archive/ documentation/General/Reference/ InfoPlistKeyReference/Articles/iPhoneOSKeys.html ▸ Sample Code ▸ Adopting iOS Dark Mode ▸ https://developer.apple.com/documentation/uikit/ appearance_customization/adopting_ios_dark_mode