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
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
910
Geminiとv0による高速プロトタイピング
shinya337
0
230
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
130
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
130
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.9k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
怖くない!はじめてのClaude Code
shinya337
0
360
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
150
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
330
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Speed Design
sergeychernyshev
32
1k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
188
11k
Why Our Code Smells
bkeepers
PRO
337
57k
A better future with KSS
kneath
239
17k
Scaling GitHub
holman
459
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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