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

getting started with dark theme

getting started with dark theme

this presentation is for meetup which is a report from google i/o 2019

punchdrunker

May 21, 2019
Tweet

More Decks by punchdrunker

Other Decks in Technology

Transcript

  1. getting started with dark theme
    by punchdrunker

    View Slide

  2. ࣗݾ঺հ
    • 2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ
    • 2011೥ʙ SNS mixi(ϛΫγΟ)
    • 2016೥ʙ Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ)
    • DroidKaigiͱ͔shibuya.apkΛӡӦ

    View Slide

  3. Dark theme
    Q͔Β৽͍͠ Dark themeʹͳͬͨ(P͔Β͋ͬͨ)
    • লిྗ
    • ࢹ֮ো֐ͷ͋Δਓʹ΍͍͞͠
    • ҉͍ॴͰݟ΍͘͢ͳΔ

    View Slide

  4. ։ൃऀ͕औΔ΂͖ରԠ

    View Slide

  5. ։ൃऀ͕औΔ΂͖ରԠ
    Կ΋͠ͳͯ͘΋ಛʹࠔΒͳ͍

    View Slide

  6. ରԠͨ͠ํ͕͍͍ΞϓϦ
    • ҉͍ͱ͜ΖͰ΋࢖ͬͯཉ͍͠ͳΒରԠͯ͋͛͠Δͱ਌੾
    • എܠ͕ന͍ΞϓϦ͸ରԠ͢ΔͱলΤωʹͳΔ͔΋
    • ͢ͰʹUiModeManageͳͲͰnight modeରԠ͍ͯ͠Δ৔߹
    ͸ରԠ͕ඞཁ
    • ΞϓϦ಺ͰςʔϚ੾Γସ͑Ͱ͖Δͱ͔
    • AppCompatDelegateΛ࢖ͬͯ͋͛Δ

    View Slide

  7. Ϣʔβʔͱͯ͠ͷ࢖͍

    • ઃఆΞϓϦ͔Β༗ޮʹ
    • Ұ౓༗ޮʹ͢Δͱ௨஌ϝχϡʔʹ΋
    ग़ݱ͢Δ
    • PixelͩͱόοςϦʔηʔόʔΛ༗ޮ
    ʹͨ࣌͠΋Dark themeʹͳΔ

    View Slide

  8. ։ൃऀଆ͔Βݟͨ࢖͍ํ
    • AppThemeΛDayNightΛܧঝͨ͠΋ͷʹ͢Δͱ(ඞਢ)
    • Theme.MaterialComponents.DayNightΛਪ঑
    • (Theme.AppCompat.DayNight ΋͋Δ)
    • DayNightͳAppThemeΛઃఆ͢Δ͜ͱͰɺViewͷഎܠͳͲ
    ྑ͍ײ͡ʹͯ͘͠ΕΔ

    View Slide

  9. ։ൃऀଆ͔Βݟͨ࢖͍ํ
    جຊతʹ͸-night ͳϦιʔε͕༏ઌͯ͠ࢀর͞ΕΔ
    • drawable-night
    • values-night ͳͲͳͲ

    View Slide

  10. ΞϓϦͷதͰͷ੾Γସ͑ํ
    • UiModeManager(api 8Ҏ্)
    • P·ͰͳΒɺ͜Ε͚ͩͰࣅͨΑ͏ͳࣄ͕࣮ݱͰ͖Δɻ
    • AppCompatDelegate(api 14Ҏ্)
    • ୺຤ͷϞʔυ੾Γସ͑ΛࢀরͰ͖Δ
    • Qͷnight nodeʹରԠ
    ਖ਼௚Կ͕ҧ͏͔Α͘Θ͔Βͳ͍ɻɻɻ

    View Slide

  11. // มߋͯ͠
    AppCompatDelegate.setDefaultNightMode(mode)
    // ൓ө͢Δ
    // appcompat:1.1.0-alpha05͔Β͸ෆཁ
    delegate.applyDayNight()
    // มߋͷ௨஌͸͜Ε͕ݺ͹ΕΔ
    onNightModeChanged(mode)

    View Slide

  12. mode
    • MODENIGHTFOLLOW_SYSTEM
    • MODENIGHTNO
    • MODENIGHTYES
    • MODENIGHTAUTO
    • ࣌ؒ൑ఆΆ͍?

    View Slide

  13. ৭ͷܾΊํ
    MDGʹ͋Δͱ͓Γ
    ϓϥΠϚϦͰݴ͏ͱ
    - ࠇΛ࢖͏ͱͯ͠΋ɺਅͬࠇ͸ආ͚Δ(#121212͘Β͍)
    - ΋ͱ΋ͱͷ৭Λ࢖͍͍ͨ৔߹͸ɺͦͷ··Ͱ͸ͳ͘ͷ࠼౓ΛԼ
    ͛Δͱྑ͍(4.5:1ʹԼ͛ͨ΋ͷ)

    View Slide

  14. ৭ͷఆٛΛ੔ཧ͢Δʹ͸
    ΞϓϦͷߏ଄ʹΑͬͯରԠํ਑͕มΘΔͷͰɺਖ਼ղ͸ͳͦ͞
    ͏ɻݱঢ়͔Β࠷΋ྑ͍ํ਑Λߟ͑·͠ΐ͏ɻ
    • ৭໊ʹblackͱ͔whiteͱ͔࢖͏ͷ͸΍Ίͨํ͕Αͦ͞͏
    (transparentͳΒ͍͍͔΋)
    • ػೳ΍෦඼ͷ໊લʹ͠·͠ΐ͏

    View Slide

  15. Demo
    https://github.com/punchdrunker/hocho/pull/46/files

    View Slide

  16. Reference
    جຊ࢓༷
    https://developer.android.com/preview/features/darktheme
    AndroidͰͷσϑΥϧτ࣮૷ʹ͍ͭͯ
    https://material.io/develop/android/theming/dark/
    ؔ࿈API
    https://developer.android.com/reference/androidx/
    appcompat/app/
    AppCompatDelegate.html#MODENIGHTFOLLOW_SYSTEM

    View Slide

  17. Reference
    ۩ମతͳରԠํ਑͸MDG͔Β
    https://material.io/design/color/dark-theme.html#usage
    ࣮ફతͳ঺հ
    https://medium.com/androiddevelopers/appcompat-v23-2-
    daynight-d10f90c83e94

    View Slide