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
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
怖くない!はじめてのClaude Code
shinya337
0
400
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
240
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
インフラ寄りSREの生存戦略
sansantech
PRO
0
170
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
PO初心者が考えた ”POらしさ”
nb_rady
0
210
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
16k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Why Our Code Smells
bkeepers
PRO
336
57k
Music & Morning Musume
bryan
46
6.6k
Designing Experiences People Love
moore
142
24k
Rails Girls Zürich Keynote
gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Become a Pro
speakerdeck
PRO
29
5.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Done Done
chrislema
184
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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