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
210
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.3k
Other Decks in Technology
See All in Technology
shake-upを科学する
rsakata
7
800
What’s new in Android development tools
yanzm
0
470
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
500
PO初心者が考えた ”POらしさ”
nb_rady
0
220
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
190
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
4
330
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8.1k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
820
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A Tale of Four Properties
chriscoyier
160
23k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Facilitating Awesome Meetings
lara
54
6.4k
How to Ace a Technical Interview
jacobian
278
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Automating Front-end Workflow
addyosmani
1370
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
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