Building dark mode with React Native at scale
summary
Shows that using platformColor API plus a generator (clariner/platform-colors) produces native color assets so JavaScript never resolves hexes, letting a large RN app switch to dark with minimal code changes. Tokenizes colors by usage, supports an app-level theme override for feature flags, and covers a 99% components win where no render logic changes are needed while falling back to hooks for the remaining cases. Notes iOS gets smooth transitions and Android requires an activity restart on Android.
AI-written summary · about
chapters (9)
- 0:00Introduction and poll
- 1:27Why dark mode matters
- 2:50Problem one system setting directly
- 4:59Problem two not using color tokens
- 6:24Problem three modifying render logic
- 8:29Platform color solution
- 13:24Dark mode demo and benefits
- 14:48Trade-offs of platform color
- 15:55Key learnings summary
related talks
28mBuilding the Dark Mode of Your Dreams with Color Science
19mThe hardest part about building dark mode is that people think it’s easy
27mThemeability is the path to dark mode
44mDeveloping in the Dark
36mCross-platform DS in React Native: Musixmatch’s case study
26mReact Native is the new black
01h 01mReact Native: A Better Way to Do Mobile
28mAdvanced Colors in iOS