getting started with dark theme

Transcript

1. 1.

   getting started with dark theme by punchdrunker

2. 2.

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

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

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

   ҉͍ॴͰݟ΍͘͢ͳΔ
4. 4.

   ։ൃऀ͕औΔ΂͖ରԠ

5. 5.

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

6. 6.

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

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

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

   themeʹͳΔ
8. 8.

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

   ྑ͍ײ͡ʹͯ͘͠ΕΔ
9. 9.

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

10. 10.

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

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

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

    onNightModeChanged(mode)
12. 12.

    mode • MODENIGHTFOLLOW_SYSTEM • MODENIGHTNO • MODENIGHTYES • MODENIGHTAUTO •

    ࣌ؒ൑ఆΆ͍?
13. 13.

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

14. 14.

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

15. 15.

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

16. 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. 17.

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