getting started with dark theme

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

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