Upgrade to Pro — share decks privately, control downloads, hide ads and more …

About Dark Mode

About Dark Mode

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

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

June 25, 2019
Tweet

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