Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
getting started with dark theme
Search
punchdrunker
May 21, 2019
Technology
2
1.1k
getting started with dark theme
this presentation is for meetup which is a report from google i/o 2019
punchdrunker
May 21, 2019
Tweet
Share
More Decks by punchdrunker
See All by punchdrunker
DnD in Compose
punchdrunker
0
200
what's new in Material Design で気になったトピック
punchdrunker
1
590
7カ国語に対応したサービスでの翻訳管理システムの改善事例
punchdrunker
1
1.2k
Java Bytecode Vertical Tasting
punchdrunker
2
1.3k
Practical Activity Transition in Android
punchdrunker
0
1.2k
今時のProgress indicator / Replacing ProgressDialog with ProgressBar
punchdrunker
0
670
レビュー評価4.7の秘密 / The Secret To A Better Reputation
punchdrunker
2
2k
Dynamic Feature Modules 入門
punchdrunker
2
2.6k
how to get started in developing Android app
punchdrunker
5
4.2k
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
240
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
290
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
7.1k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
160
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
Witchcraft for Memory
pocke
1
700
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Connect 100+を支える技術
kanyamaguc
0
160
PO初心者が考えた ”POらしさ”
nb_rady
0
150
モバイル界のMCPを考える
naoto33
0
390
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
A Tale of Four Properties
chriscoyier
160
23k
A designer walks into a library…
pauljervisheath
207
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
BBQ
matthewcrist
89
9.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Transcript
getting started with dark theme by punchdrunker
ࣗݾհ • 2010ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ • 2011ʙ SNS mixi(ϛΫγΟ) • 2016ʙ
ՈΞϧόϜ ΈͯͶ(ϛΫγΟ) • DroidKaigiͱ͔shibuya.apkΛӡӦ
Dark theme Q͔Β৽͍͠ Dark themeʹͳͬͨ(P͔Β͋ͬͨ) • লిྗ • ࢹ֮োͷ͋Δਓʹ͍͞͠ •
҉͍ॴͰݟ͘͢ͳΔ
։ൃऀ͕औΔ͖ରԠ
։ൃऀ͕औΔ͖ରԠ Կ͠ͳͯ͘ಛʹࠔΒͳ͍
ରԠͨ͠ํ͕͍͍ΞϓϦ • ҉͍ͱ͜ΖͰͬͯཉ͍͠ͳΒରԠͯ͋͛͠Δͱ • എܠ͕ന͍ΞϓϦରԠ͢ΔͱলΤωʹͳΔ͔ • ͢ͰʹUiModeManageͳͲͰnight modeରԠ͍ͯ͠Δ߹ ରԠ͕ඞཁ •
ΞϓϦͰςʔϚΓସ͑Ͱ͖Δͱ͔ • AppCompatDelegateΛͬͯ͋͛Δ
Ϣʔβʔͱͯ͠ͷ͍ ํ • ઃఆΞϓϦ͔Β༗ޮʹ • Ұ༗ޮʹ͢Δͱ௨ϝχϡʔʹ ग़ݱ͢Δ • PixelͩͱόοςϦʔηʔόʔΛ༗ޮ ʹͨ࣌͠Dark
themeʹͳΔ
։ൃऀଆ͔Βݟ͍ͨํ • AppThemeΛDayNightΛܧঝͨ͠ͷʹ͢Δͱ(ඞਢ) • Theme.MaterialComponents.DayNightΛਪ • (Theme.AppCompat.DayNight ͋Δ) • DayNightͳAppThemeΛઃఆ͢Δ͜ͱͰɺViewͷഎܠͳͲ
ྑ͍ײ͡ʹͯ͘͠ΕΔ
։ൃऀଆ͔Βݟ͍ͨํ جຊతʹ-night ͳϦιʔε͕༏ઌͯ͠ࢀর͞ΕΔ • drawable-night • values-night ͳͲͳͲ
ΞϓϦͷதͰͷΓସ͑ํ • UiModeManager(api 8Ҏ্) • P·ͰͳΒɺ͜Ε͚ͩͰࣅͨΑ͏ͳࣄ͕࣮ݱͰ͖Δɻ • AppCompatDelegate(api 14Ҏ্) •
ͷϞʔυΓସ͑ΛࢀরͰ͖Δ • Qͷnight nodeʹରԠ ਖ਼Կ͕ҧ͏͔Α͘Θ͔Βͳ͍ɻɻɻ
// มߋͯ͠ AppCompatDelegate.setDefaultNightMode(mode) // ө͢Δ // appcompat:1.1.0-alpha05͔Βෆཁ delegate.applyDayNight() // มߋͷ௨͜Ε͕ݺΕΔ
onNightModeChanged(mode)
mode • MODENIGHTFOLLOW_SYSTEM • MODENIGHTNO • MODENIGHTYES • MODENIGHTAUTO •
࣌ؒఆΆ͍?
৭ͷܾΊํ MDGʹ͋Δͱ͓Γ ϓϥΠϚϦͰݴ͏ͱ - ࠇΛ͏ͱͯ͠ɺਅͬࠇආ͚Δ(#121212͘Β͍) - ͱͱͷ৭Λ͍͍ͨ߹ɺͦͷ··Ͱͳ͘ͷ࠼ΛԼ ͛Δͱྑ͍(4.5:1ʹԼ͛ͨͷ)
৭ͷఆٛΛཧ͢Δʹ ΞϓϦͷߏʹΑͬͯରԠํ͕มΘΔͷͰɺਖ਼ղͳͦ͞ ͏ɻݱঢ়͔Β࠷ྑ͍ํΛߟ͑·͠ΐ͏ɻ • ৭໊ʹblackͱ͔whiteͱ͔͏ͷΊͨํ͕Αͦ͞͏ (transparentͳΒ͍͍͔) • ػೳ෦ͷ໊લʹ͠·͠ΐ͏
Demo https://github.com/punchdrunker/hocho/pull/46/files
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
Reference ۩ମతͳରԠํMDG͔Β https://material.io/design/color/dark-theme.html#usage ࣮ફతͳհ https://medium.com/androiddevelopers/appcompat-v23-2- daynight-d10f90c83e94