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

4f31137c606d3d1c06d0d86fc7fd4bdd?s=128

punchdrunker

May 21, 2019
Tweet

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