getting started with dark theme

Transcript

1. getting started with dark theme by punchdrunker

2. ࣗݾ঺հ • 2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ • 2011೥ʙ SNS mixi(ϛΫγΟ) • 2016೥ʙ

   Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ) • DroidKaigiͱ͔shibuya.apkΛӡӦ

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

   ҉͍ॴͰݟ΍͘͢ͳΔ

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

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

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

   ΞϓϦ಺ͰςʔϚ੾Γସ͑Ͱ͖Δͱ͔ • AppCompatDelegateΛ࢖ͬͯ͋͛Δ

7. Ϣʔβʔͱͯ͠ͷ࢖͍ ํ • ઃఆΞϓϦ͔Β༗ޮʹ • Ұ౓༗ޮʹ͢Δͱ௨஌ϝχϡʔʹ΋ ग़ݱ͢Δ • PixelͩͱόοςϦʔηʔόʔΛ༗ޮ ʹͨ࣌͠΋Dark

   themeʹͳΔ

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

   ྑ͍ײ͡ʹͯ͘͠ΕΔ

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

10. ΞϓϦͷதͰͷ੾Γସ͑ํ • UiModeManager(api 8Ҏ্) • P·ͰͳΒɺ͜Ε͚ͩͰࣅͨΑ͏ͳࣄ͕࣮ݱͰ͖Δɻ • AppCompatDelegate(api 14Ҏ্) •

    ୺຤ͷϞʔυ੾Γସ͑ΛࢀরͰ͖Δ • Qͷnight nodeʹରԠ ਖ਼௚Կ͕ҧ͏͔Α͘Θ͔Βͳ͍ɻɻɻ

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

    onNightModeChanged(mode)

12. mode • MODENIGHTFOLLOW_SYSTEM • MODENIGHTNO • MODENIGHTYES • MODENIGHTAUTO •

    ࣌ؒ൑ఆΆ͍?

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

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

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

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

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