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

実践Dark Mode対応 / Implementing Dark Mode

C0c3e2b792a468590679e46b86e1784d?s=47 hirothings
November 08, 2019

実践Dark Mode対応 / Implementing Dark Mode

C0c3e2b792a468590679e46b86e1784d?s=128

hirothings

November 08, 2019
Tweet

More Decks by hirothings

Other Decks in Programming

Transcript

  1. ࣮ફDark ModeରԠ @hirothings

  2. ࣗݾ঺հ • @hirothings (Objective-ͻΖC) • ݩϥʔϝϯ԰ళ௕ϓϩάϥϚʔ • ৭ʑ͋ͬͯݱࡏiOSσϕϩούʔ

  3. ৭ͷࢦఆʹ͍ͭͯ

  4. μʔΫϞʔυରԠ࣌ͷ৭ઃܭʹ͍ͭͯ Human Interface GuidelinesΑΓ • ηϚϯςΟοΫΧϥʔΛ࢖༻͢Δ͜ͱ(label, separator, systemBackground..etc) • γεςϜఆٛͷ৭Λ࢖༻͢Δͱɺલܠͱഎܠͷίϯςϯπؒͷద੾ͳίϯ

    τϥετൺ͕อূ͞ΕΔ(ޙड़) • ΧελϜΧϥʔͷ৔߹ɺಛʹখ͍͞ςΩετͷ৔߹ɺίϯτϥετൺ7ɿ1 Λ໨ࢦ͢͜ͱ • μʔΫϞʔυͰίϯςϯπʹന͍എܠΛ࢖༻͢Δඞཁ͕͋Δ৔߹͸ɺपғ ͷ҉͍ίϯςϯπʹରͯ͠എܠ͕ޫΒͳ͍Α͏ʹɺগ͠҉͍നΛબ୒͢Δ ͜ͱ
  5. Color SetΛ׆༻͢Δ

  6. Color SetΛ׆༻͢Δ Light Dark Any

  7. Color SetΛ׆༻͢Δ SwiftGenͳͲΛ࢖ͬͯɺίʔυ͔Βࢀর͢Δ࣌ʹλΠϓηʔϑʹͳΔΑ͏ରԠ͢Δͱ ͞Βʹศརɻ ը૾ͷAssetsͱ৭ͷAssets͸෼͚ͯ؅ཧ͢Δͱݟ΍͍͢

  8. CONTRAST CHECKERͰίϯτϥετൺͷ֬ೝ͕Ͱ͖Δ https://contrastchecker.com/

  9. ը૾ʹ͍ͭͯ

  10. SF Symbols SF SymbolsΛ࢖͏ͱࣗಈͰ྆ϞʔυରԠͰ͖Δ

  11. SF Symbols SF Symbolsʹ͍ͭͯิ଍ • 1500Ҏ্ͷΞΠίϯηοτ • 9ͭͷ΢ΣΠτ • iOS

    13~ • SF Symbols appͰϓϨϏϡʔ͕Մೳ (લεϥΠυͷεΫγϣ΋͜Ε) • https://developer.apple.com/design/human-interface-guidelines/sf- symbols/overview/ • download the SF Symbols app. ͷ෦෼͔ΒDLͰ͖Δ..(෼͔ΓͮΒ͍)
  12. Image Assets Color Setಉ༷ɺμʔΫɾϥΠτࢦఆ͕Մೳ

  13. Background Colorʹ͍ͭͯ

  14. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ γεςϜఆٛͷ৭Λ࢖༻͢ΔͱɺϑΥΞάϥ΢ϯυͱόοΫάϥ ΢ϯυͷίϯςϯπؒͷద੾ͳίϯτϥετൺ͕อূ͞ΕΔ “Using system-defined colors ensures a proper contrast

    ratio between your foreground and background content.” (HIG) .systemBackgroundColor .secondarySystemBackground .. etc
  15. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ

  16. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ Ϟʔμϧͷഎܠ৭ ͷํ͕શମతʹ ໌Δ͍

  17. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ϝϦοτ • ࣗ਎ͷViewͷ֊૚ʹԠͯ͡ɺ৭߹͍ΛࣗಈͰௐ੔ͯ͘͠ΕΔ • .systemBackgroundColor ͳͲΛࢦఆ͢Δ͚ͩ • ͜ͷը໘͸Ϟʔμϧ͔ͩΒ..ͱҰͭҰͭΧελϜΧϥʔΛࢦ

    ఆ͢Δͷ͸ഁ୼͢Δ
  18. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ฐ֐ • LightϞʔυ࣌ͷഎܠ৭ΛΧελϚΠζͰ͖ͳ͍ ͜͏͍͏୶͍τʔϯͷഎܠ৭ΛΞϓϦͷ τʔϯʹ߹Θͤͯࢦఆ͍ͨ࣌͠ͳͲ

  19. ίʔυͰରԠ͢Δ

  20. ίʔυͰରԠ͕ඞਢͷՕॴ CALayer • borderColor • shadowOpacity • shadowColor ..etc

  21. ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ UITraitCollectionΛ࢖͏ • OSͷΞϐΞϥϯε͕੾ΓସΘͬͨλΠϛϯάͰݺ͹ΕΔ ྫ͑͹Ϣʔβʔ͕μʔΫϞʔυʹ੾Γସ͑ͨλΠϛϯάͰ
 ΞΠίϯΛμʔΫϞʔυ࢓༷ʹ͢Δ͜ͱ΋Մೳ

  22. ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ https://developer.apple.com/videos/play/wwdc2019/214/ UITraitCollectionΛ࢖͏ • UIColorͷΫϩʔδϟΛ࢖ͬͨॳظԽ΋͋Γ

  23. μʔΫϞʔυͷσόοάʹ͍ͭͯ

  24. Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ

  25. Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ ϥΠτɾμʔΫͷ؆қ֬ೝ͕ Ϗϧυͳ͠Ͱग़དྷΔ

  26. γϛϡϨʔλͷLight / Dark੾Γସ͑΋ XcodeͰ΍ΔͱϥΫ Accessibilityͷઃఆ΋

  27. ࣮ػͩͱίϯτϩʔϧηϯλʔͰαοͱม͑ΒΕΔ ઃఆ > ίϯτϩʔϧηϯλʔ > ίϯτϩʔϧηϯλʔΛΧελϚΠζ

  28. UITraitCollectionͷΠϕϯτͷσόοά traitCollectionDidChange(_:) ΍ willTransition(to:with:)ͷ ϩΪϯά͕Մೳ(iOS13~) https://developer.apple.com/videos/play/wwdc2019/214/

  29. ଞTIPS • ྫ͑εϓϥογϡ࣮૷͍ͯ͠ͳͯ͘΋ɺLaunchScreenͷμʔΫ ϞʔυରԠ͸ࡁ·ͤΔ͜ͱ • ΞϓϦىಈ࣌ɺҰॠന͍ը໘͕දࣔ͞ΕΔ • ๨Εͯͦͷ··ϦϦʔεͨ͠ • (SlackͷΞϓϦ΋ରԠ๨Εͯͨˠ)

    • μʔΫϞʔυରԠ͠ͳ͍৔߹͸ɺInfo-Plistʹ UIUserInterfaceStyle: LightΛࢦఆ͢Δ
  30. μʔΫϞʔυରԠͷϋʔυϧʹ͍ͭͯ • ը໘਺͸ແ࿦ɺطଘΞϓϦͷ৭ͷ؅ཧঢ়ଶʹΑͬͯมΘΔ • Named ColorsΛఆٛ͢Δ͔͠ͳ͍ͷͰɺରԠ͢Δͱࣗવͱ৭ ͷ؅ཧ͕੔ཧ͞ΕΔ • ΞϓϦͷੑ࣭ʹΑΔ •

    ϢʔςΟϦςΟܥͷΞϓϦͩͱൺֱతָ͔ɻधཁ΋͋Γͦ͏ • ΠϥετΛ;ΜͩΜʹ࢖͍ͬͯΔΞϓϦͳͲμʔΫϞʔυͱ ͷ૬ੑ͕೉͍͠΋ͷ΋͋Δ
  31. νʔϜ։ൃͰରԠ͢Δ৔߹ • ίϯϙʔωϯτϨϕϧͰͷμʔΫϞʔυͷݕূ͸ඞཁ • 1ը໘ͣͭμʔΫϞʔυ༻ͷը໘Λى͜͢ͷ͸ݶք͕͋Γͦ͏(५ ୔ʹσβΠφʔͷϦιʔε͕͋ΔͳΒ΍ΕΔ) • ίϯϙʔωϯτͷݕূΛࡁ·ͤͨΒɺ࣮ࡍʹը໘Λ࣮૷ͯ͠σβ Πφʔͱ౎౓֬ೝ͢ΔελΠϧ͕ݱ࣮ղ͔ͱࢥΘΕΔ •

    ϓϩμΫτͰ࣮૷͍ͯ͠ͳ͍ͷͰໝ૝Ϩϕϧ..