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

Add dark mode to your apps in iOS 13 #wwdc19 #timers_meetup

fromkk
June 18, 2019

Add dark mode to your apps in iOS 13 #wwdc19 #timers_meetup

Timersで開催されたTimers Meetup #2 WWDC After Partyで発表した内容です。
Dark Modeに対応する為に必要な知識を発表しました。

fromkk

June 18, 2019
Tweet

More Decks by fromkk

Other Decks in Programming

Transcript

  1. "EEEBSLNPEFUPZPVSBQQT

    JOJ04

    5JNFST.FFUVQd88%$"GUFS1BSUZd
    *NQMFNFOUJOH%BSL.PEFPOJ04

    View full-size slide

  2. 1SPpMF
    struct Profile {
    let name = "Kazuya Ueoka"
    let twitter = "@fromkk"
    let github = "fromkk"
    let qiita = "fromkk"
    let company = "Timers Inc."
    }

    2

    View full-size slide

  3. %BSLNPEF ❓

    View full-size slide

  4. )PXUPJNQMFNFOUT

    View full-size slide

  5. 04͕༻ҙͨ͠৭Λར༻
    open class var systemIndigo: UIColor { get }

    open class var systemGray2: UIColor { get }

    open class var systemGray3: UIColor { get }

    open class var systemGray4: UIColor { get }

    open class var systemGray5: UIColor { get }

    open class var systemGray6: UIColor { get }

    open class var label: UIColor { get }

    open class var secondaryLabel: UIColor { get }

    open class var tertiaryLabel: UIColor { get }

    open class var quaternaryLabel: UIColor { get }

    open class var link: UIColor { get }

    open class var placeholderText: UIColor { get }

    open class var separator: UIColor { get }

    open class var opaqueSeparator: UIColor { get }

    open class var systemBackground: UIColor { get }

    open class var secondarySystemBackground: UIColor { get }

    open class var tertiarySystemBackground: UIColor { get }

    open class var systemGroupedBackground: UIColor { get }

    open class var secondarySystemGroupedBackground: UIColor { get }

    open class var tertiarySystemGroupedBackground: UIColor { get }

    open class var systemFill: UIColor { get }

    open class var secondarySystemFill: UIColor { get }

    open class var tertiarySystemFill: UIColor { get }

    open class var quaternarySystemFill: UIColor { get }
    ˞J04Ͱ૿͑ͨ৭ͷҰཡͳͷͰશ͕ͯ%BSLNPEFରԠ͔Ͳ͏͔͸֬ೝ͍ͯ͠·ͤΜ

    View full-size slide

  6. "TTFUT
    w $PMPS*NBHFBTTFUTʹ%BSL
    "QQFBSBODF͕௥Ճ /%"ʹ഑ྀͷҝࣗॗ

    View full-size slide

  7. *#্Ͱը૾ͷ৭มߋ
    w *NBHF"TTFUͷ3FOEFS"TΛ5FNQMBUF
    *NBHFʹઃఆ
    w *#ଆͰը૾ͷ5JOUDPMPSΛઃఆ
    5JQT

    View full-size slide

  8. *NQMFNFOUTXJUIDPEF
    w USBJU$PMMFDUJPOͷVTFS*OUFSGBDF4UZMFϓϩύςΟΛར༻
    public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
    }
    w ΧελϜ%ZOBNJD$PMPSΛ࡞੒
    let dynamicColor = UIColor { traitCollection -> UIColor in
    switch traitCollection.userInterfaceStyle {
    case .dark:
    return .red
    default:
    return .blue
    }
    }


    etc…

    View full-size slide

  9. *NQMFNFOUTXJUIDPEF
    w ໌ࣔతʹϋϯυϦϯά
    let dynamicColor = UIColor.systemBackground
    let traitCollection = view.traitCollection
    let resolvedColor = dynamicColor.resolvedColor(with: traitCollection)

    let resolvedImage = image.imageAsset?.image(with: traitCollection)
    w ΠϕϯτϋϯυϦϯά
    *NQMFNFOUJOH%BSL.PEFPOJ04
    ΑΓҾ༻

    View full-size slide

  10. %BSLNPEFͷมߋํ๏
    var overrideUserInterfaceStyle: UIUserInterfaceStyle
    ը໘ຖʹઃఆ

    6*7JFX 6*7JFX$POUSPMMFS
    UIUserInterfaceStyle: Light or Dark
    ΞϓϦશମΛઃఆ

    *OGPQMJTU

    View full-size slide

  11. ஫ҙࣄ߲
    w 6*"DUJWJUZ*OEJDBUPS4UZMFͷHSBZXIJUFXIJUF-BSHF͕EFQSFDBUFE

    NFEJVNͱMBSHF͕৽ઃ ৭͸DPMPSϓϩύςΟʹઃఆग़དྷΔ

    w 6*4UBUVT#BS΍εΫϩʔϧόʔͷ৭͕ϞʔυʹΑͬͯมߋ͞ΕΔࣄ͕͋Δ
    w Ө͕࢖͑ͳ͍ ͱ͍͏͔ҙຯΛͳ͞ͳ͍
    ͷͰ৭ͰϨΠϠʔΛදݱ͢Δඞཁ
    ͕͋Δ

    View full-size slide

  12. ஍ࠈ͸͔͜͜Β

    View full-size slide

  13. ຊ౰ͷ஍ࠈ

    View full-size slide

  14. ຊ౰ͷ஍ࠈ

    View full-size slide

  15. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ

    View full-size slide

  16. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ
    view.backgroundColor = .white
    ίʔυͰ৭Λ௚઀ࢦఆ

    View full-size slide

  17. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ
    view.backgroundColor = .white
    ίʔυͰ৭Λ௚઀ࢦఆ
    എܠ͕നΛલఏͱͨ͠ը૾ୡ

    View full-size slide

  18. ·ͱΊ
    w ͳΔ΂͘%BSLNPEFʹ͸ରԠ͍͖͍ͯͨ͠ॴଘ
    w *#΍ίʔυͰ৭Λ௚઀ࢦఆ͍ͯ͠ΔՕॴ͕͋Ε͹ࠓͷ͏ͪʹ$PMPS"TTFU
    Խ͓͖͍ͯͨ͠
    w ໨΍όοςϦʔʹ༏͘͠ͳΖ͏

    View full-size slide

  19. • αʔόʔαΠυΤϯδχΞ (PHP, Golang, AWS)
    • AndroidΤϯδχΞ (Kotlin)
    • iOSΤϯδχΞ (Swift)
    TimersͰ͸ݱࡏΤϯδχΞશ৬छ࠾༻தʂ

    ৄ͘͠͸”Timers”Ͱݕࡧ

    View full-size slide

  20. 5IBOLZPV&
    ϕʔλ൛ͷ಺༰ʹ͸มߋ͕ՃΘΔՄೳੑ͕͋Γ·͢ɻ

    ਖ਼֬ੑͷ୲อ͸ग़དྷͳ͍ࢫΛྃ͝ঝ͍ͩ͘͞ɻ

    View full-size slide