getting started with dark theme

Slide 1

Slide 1 text

getting started with dark theme by punchdrunker

Slide 2

Slide 2 text

ࣗݾ঺հ • 2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ • 2011೥ʙ SNS mixi(ϛΫγΟ) • 2016೥ʙ Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ) • DroidKaigiͱ͔shibuya.apkΛӡӦ

Slide 3

Slide 3 text

Dark theme Q͔Β৽͍͠ Dark themeʹͳͬͨ(P͔Β͋ͬͨ) • লిྗ • ࢹ֮ো֐ͷ͋Δਓʹ΍͍͞͠ • ҉͍ॴͰݟ΍͘͢ͳΔ

Slide 4

Slide 4 text

։ൃऀ͕औΔ΂͖ରԠ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ରԠͨ͠ํ͕͍͍ΞϓϦ • ҉͍ͱ͜ΖͰ΋࢖ͬͯཉ͍͠ͳΒରԠͯ͋͛͠Δͱ਌੾ • എܠ͕ന͍ΞϓϦ͸ରԠ͢ΔͱলΤωʹͳΔ͔΋ • ͢ͰʹUiModeManageͳͲͰnight modeରԠ͍ͯ͠Δ৔߹ ͸ରԠ͕ඞཁ • ΞϓϦ಺ͰςʔϚ੾Γସ͑Ͱ͖Δͱ͔ • AppCompatDelegateΛ࢖ͬͯ͋͛Δ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ΞϓϦͷதͰͷ੾Γସ͑ํ • UiModeManager(api 8Ҏ্) • P·ͰͳΒɺ͜Ε͚ͩͰࣅͨΑ͏ͳࣄ͕࣮ݱͰ͖Δɻ • AppCompatDelegate(api 14Ҏ্) • ୺຤ͷϞʔυ੾Γସ͑ΛࢀরͰ͖Δ • Qͷnight nodeʹରԠ ਖ਼௚Կ͕ҧ͏͔Α͘Θ͔Βͳ͍ɻɻɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

mode • MODENIGHTFOLLOW_SYSTEM • MODENIGHTNO • MODENIGHTYES • MODENIGHTAUTO • ࣌ؒ൑ఆΆ͍?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Demo https://github.com/punchdrunker/hocho/pull/46/ﬁles

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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