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
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