Dark Mode by. 2019/6/17 WWDCΰϦΰϦΩϟονΞοϓձ 1

takasek @takasek Works OSS: ActionClosurable౳ App: PasteTheType Articles ʮίϯύΠϧΤϥʔ΍ϥϯλΠϜΤϥʔΛ௚͍ͯ͘͠ ͚ͩͰiOSΞϓϦͷ࡞Γํ͕Θ͔ΔϓϩδΣΫτʯ ʮ͓લΒ͕ModelͱݺͿΞϨΛͳΜͱݺͿ΂͖͔ʯ ʮiOSΞϓϦઃܭύλʔϯೖ໳ʯʢڞஶʣ 2

໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 3

໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 4

Dark Modeͱ͸͜͏͍͏΋ͷ • ಈը΍ࣸਅͳͲͷίϯςϯπʹूதͰ͖Δ • ޷Ήਓ͕͍Δ • ࠇഎܠʹϕθϧ͕ӅΕΔ • όοςϦʔফඅΛ཈͑Δ 5

iOS Design System 6

iOS Design System ͷ໨త • familiarity(Θ͔ΓΈ)ͷҡ࣋ • ϓϥοτϑΥʔϜͷҰ؏ੑ • ໌֬ͳ৘ใώΤϥϧΩʔ • ΞΫηγϏϦςΟ • γϯϓϧ 7

iOS Design System Λࢧ͑Δٕज़ • Dark Mode • Materials • UIKitۘ੡ͷViews 8

Appleͷओு UIKitۘ੡ͷʢ৭ɺmaterialɺviewɺcontrolʣΛ࢖͓͏ ඞཁͳ৔߹ʹΧελϚΠζͯ͘͠Ε 9

໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 10

Semantic Color ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ ❌ • title: light=(0,0,0) dark=(255,255,255) • subtitle: light=(60,60,67) dark=(235,235,245) • icon: light=(60,60,67) dark=(235,235,245) • background: light=(118,118,128) dark=(118,118,128) 11

Semantic Color ʹ৭Λϋʔυίʔυͤͣɺ໨తͰදݱ͢Δ ⭕ • title: .labelColor • subtitle: .secondaryLabelColor • icon: .secondaryFillColor • background: .tertiaryFillColor 12

Semantic ColorͰදݱͰ͖͍ͯΕ͹ɺ UIKitۘ੡ͷviewͰͳ͘ͱ΋ɺΧελϜͷViewͰ΋μʔΫϞʔ υରԠ؆୯ 13

System Colors͸ɺLight, Darkʹ͘Θ͑ɺͦΕͧΕʹaccessible color΋ઃఆ͞Ε͍ͯΔ ʢ΋ͪΖΜɺΧελϜΧϥʔͰ΋ઃఆ͸ՄೳͰ͢ʣ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ 14

HIGʹ͸ଞʹ΋৭ʑॻ͍ͯ͋ΔͷͰඞಡ https://developer.apple.com/design/human-interface- guidelines/ios/visual-design/color/ • ʮSystem Colorͷ໨తΛ࠶ఆٛ͢ΔͳɺҙਤͷҰ؏ੑΛଛͳ͏ ͷͰʯ • ʮಠࣗ࠶ݱ΋͢Δͳɺ৭ʹௐ੔͕ೖΔ͜ͱ͕͋ΔͷͰʯ • ʮΧελϜΧϥʔͰ͸ɺલܠഎܠͷίϯτϥετൺ͸7:1ʯ ͳͲ 15

ͪΐͬͱ୤ઢ͠·͢ ͕… Χϥʔίϯτϥετͱ͍͑͹ɺtry! Swift TokyoͰ΋ྑ͍ൃද͕͋Γ·ͨ͠ Ͷɻ ๨Εͳ͍Α͏ʹ͍ͨ͠Ͱ͢Ͷɻ ΞΫηγϏϦςΟͷͨΊͷΧϥʔίϯτ ϥετ - niwatakoͷ͸ͯͳϒϩά http://niwatako.hatenablog.jp/entry/ 2019/03/21/104753 16

Base and Elevated 17

viewʹ͸֊૚ߏ଄͕͋Γ·͢ ͔͠͠ Light Mode ͱ Dark Mode Ͱ͸ͦͷදݱ͕ҟͳΔ • LightͰ͸ drop shadow͕࢖͑Δ • DarkͰ͸࢖͑ͳ͍ • ͔ΘΓʹelevated background colorΛ࢖ͬͯΔ • ֊૚্͕ͷViewͷഎܠ৭͸ɺͪΐͬͱ໌Δ͍ 18

ͪͳΈʹElevationͷߟ͑ํ͸ɺMaterial Designతʹ΋ڞ௨ https://material.io/design/color/dark-theme.html#properties 19

Human Interface Guidelines ᐌ͘ɺ ҰൠతʹɺҎԼͷഎܠ৭ͷόϦΤʔγϣϯͰ֊૚Λࣔ͢ • Primary: શମతͳView • Secondary: Primary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ • Tertiary: Secondary಺ͰάϧʔϓԽ͞Εͨίϯςϯπ΍ཁૉ https://developer.apple.com/documentation/uikit/uicolor/ ui_element_colors 20

Dark Mode ͱ Materials 21

Materials ͱ͸ എܠ͕Blur Effectʢ UIBlurEffect ʣͰ൓ө͞Ε͍ͯΔίϯ ϙʔωϯτ ৭͸ແࢹ͞Εɺ Solid Color Ͱ͸ͳ͘ Vibrant Color Ͱදݱ ͞ΕΔ લܠ͕എܠ৭ʹӨڹ͞ΕΔͷͰɺSolid Colorͩͱഎܠ৭࣍ୈ Ͱ༹͚ࠐΉ Vibrant ColorͳΒͲΜͳ৭߹͍Ͱ΋ݟ΍͍͢ 22

ͦͷଞɺDark Modeʹ ӨڹΛड͚Δ΋ͷ 23

ͦͷଞɺDark ModeʹӨڹΛड͚Δ΋ͷνΣοΫϦετ • Attributed Text • UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔ • Status Bar • UIScrollViewͷindicator style • UIActivityIndicatorView 24

໨࣍ 1. Dark ModeͷཱͪҐஔ 2. σβΠϯ্ͷ؍఺ 3. ࣮૷্ͷ؍఺ 25

Interface Builder • ίϯϙʔωϯτͷ৭ʹ͸ Dynamic Color Λࢦఆ͢Δ • ΧελϚΠζ͚ͨ͠Ε͹ɺ • Color AssetʹAppearanceΛ૿΍͢ • Image Asset΋Appearance͸͋Δ Ҏ্ʂ 26

ίʔυ ίʔυ for UIColor Dynamic ColorΛηοτͨ͠৔߹͸ɺࣗಈతʹมԽ // iOS13未満 view.backgroundColor = .white // iOS13以降 view.backgroundColor = .systemBackground 27

ίʔυ for Materials UIVibrancyEffect ͷ style ΋ DynamicʹͳΔ // iOS13未満 let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: .light) ) // iOS13以降 let effect = UIVibrancyEffect( blurEffect: UIBlurEffect(style: . systemThinMaterial), style: .secondaryLabel ) 28

͘͠Έɿ UITraitCollection ͷ͓͔͛ let dynamicColor = UIColor { traitCollection -> UIColor in if traitCollrction.userInterfaceStyle == .dark { return .black } else { return .white } } ※ UITraitCollection = Size classesͱؚ͔͕·ΕΔ΍ͭ 29

ʢSession 214: Implementing Dark Mode in i OS ͷࢿྉpdf p100 Λݟ ͳ͕Β௥͍ͬͯͩ͘͞ʣ 1. ֤Controller΍View͕traitCollection ͷࢀরΛࢠʹҾ͖౉͍ͯ͠Δ 2. Light Mode / Dark Mode ͕੾ΓସΘΔͱ traitCollection ͕มԽ͢ Δ 3. ࢠͷ traitCollectionDidChange(_:) ͕ݺ͹ΕΔ 4. dynamic color͸࣮ࡍͷ৭Λresolveͯ͠ద༻ • draw(_ rect: CGRect) ͷλΠϛϯάͰ UITraitCollection.current ͕ηοτ͞ΕΔ 30

traitCollectionͷΦʔόʔϥΠυ UserInterfaceStyle ΍ traitCollection ͸ɺView, ViewController, PresentationController౳ͷϨϕϧͰ ΦʔόʔϥΠυՄೳ ɹ ※ Info.plist ͷ UIUserInterfaceStyle Λઃఆ͢Ε͹ ΞϓϦશମͷstyleΛ্ॻ͖͢Δ͜ͱ΋Մೳ ʹμʔΫϞʔυରԠΛແޮԽ 31

Attributed Text ΋ Dynamic ColorରԠͯ͠ Δ // iOS13未満 let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 36.0) ] // iOS13以降 let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 36.0), .foregroundColor: UIColor.label // ] 32

Q. UIColorΛ࢖Θͳ͍ layer.borderColor ͱ͔΋উखʹ ൓ө͞ΕΔͷʁ A. CGColorͳͷͰDynamicʹͳΒͳ͍ layoutSubviews() ͳͲͷλΠϛϯάͰదٓߋ৽͢Δඞཁ͕͋Δ ·ͨɺ UIColor.label.cgColor Ͱ͸औΕͳ͍ ͪΌΜͱresolveͨ͠UIColor͔ΒCGColorΛऔΓग़͢͜ͱ ※ ϥΠϑαΠΫϧϝιουͷ֎Ͱ͸ɺ ɹtraitCollection͕ಛఆͷ஋Λ͍ࣔͯ͠Δ͜ͱ͸อূ͞Εͳ͍ ɹ֎Ͱѻ͍͍ͨͱ͖͸ࣗ෼Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ 33

let layer = CALayer() let traitCollection = view.traitCollection // Option 1 let resolvedColor = UIColor.label.resolvedColor(with: traitCollection) layer.borderColor = resolvedColor.cgColor // Option 2 traitCollection.performAsCurrent { layer.borderColor = UIColor.label.cgColor } // Option 3 let savedTraitCollection = UITraitCollection.current UITraitCollection.current = traitCollection layer.borderColor = UIColor.label.cgColor UITraitCollection.current = savedTraitCollection 34

ͦͷଞͷίϯϙʔωϯτ 35

Status Bar • iOS13ະຬ: • .default, .lightContent ͕ઃఆ͞Εͯͨ • iOS13Ҏ߱: • traitʹԠͯ͡ .darkContent, .lightContent ͕ઃఆ͞Ε Δ • UIScrollView ͷ indicator style΋ಉ༷ 36

UIActivityIndicatorView • iOS13ະຬ: • .gray , .white , .whiteLarge • iOS13Ҏ߱: • Dynamic Styles͕ద༻͞ΕΔ • color propertyΛηοτ͢Δ͜ͱ 37

ݸਓతݟղ 38

ݸਓతݟղ • Dark Mode͸ද૚͚ͩͳͧΕ͹͍͍΋ͷͰ͸ͳ͍ͱ࣮ײ • Apple͕ఏڙ͢ΔDesign Systemͷͻͱͭͱ͍͏Ґஔ͚ͮ • ͪΌΜͱ৽σβΠϯγεςϜશମͷ஌ࣝΛΞοϓσʔτ͠ͳ͍ͱة͏͍ͱײ ͡Δ • ͱ͘ʹ Session 808: What's New in iOS Design ͷσβΠφʔ΁ͷΠϯ ϓοτΛ͔ͬ͠Γ • ରԠ͢ΔͳΒૣ͘ iOS10 ͸੾Γ͍ͨ • Color Assets͸iOS11ʙͰͳ͍ͱ࢖͑ͳ͍ͷͰ 39

ࢀߟࢿྉ 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/ σβΠφʔ΋νΣοΫͯ͠΄͍͠WWDC19ͷσβΠϯܥΞοϓ σʔτ #Zaimʛakatsuki174 https://blog.zaim.co.jp/n/n4cb9da9d5319 40