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
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
what's new in Material Design で気になったトピック
punchdrunker
1
560
7カ国語に対応したサービスでの翻訳管理システムの改善事例
punchdrunker
1
1.1k
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
620
レビュー評価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
droidcon-overview.pdf
punchdrunker
0
440
Other Decks in Technology
See All in Technology
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
180
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
380
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.1k
What's new in Go 1.24?
ciarana
1
110
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building an army of robots
kneath
303
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Embracing the Ebb and Flow
colly
84
4.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
For a Future-Friendly Web
brad_frost
176
9.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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