Themeability is the path to dark mode
summary
GitHub starts with 2449 hex values scattered through Sass in 2017 and migrates to Sass variables, then builds a Primer component library (React) using Styled Components and Styled System in 2018 to get themeable, reusable styles. Experimentation shows dark mode is not a simple inversion: links shift one step, icons need more, orange and contribution-graph colours need large hue and luminance changes. User demand shows up as 20,000+ downloads of a dark-mode Chrome extension. Primer and CSS-variable work are open source and a Rails component model is underway.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 7:29Componentized architecture
- 13:43Reversed colors
- 14:33Reverse colours
- 15:42Changing colours
- 16:09Color system
- 16:24Color influence
- 17:07Inversion
- 17:32Elevation
- 18:43Reimagines
- 18:59History of color
- 19:53Irregular shapes
- 20:15Color relations
- 20:46Brian Levin
- 21:17Recap
- 21:31Swatches
- 21:52Working with color modes
- 22:14iOS
- 22:40Color Names
- 23:26Theme UI
- 24:45Color Quotes
- 25:19Color is Relative
related talks
19mThe hardest part about building dark mode is that people think it’s easy
22mPractical Refactors With Modern CSS Colors
43mWelcome... to the Dark Side?
28mBuilding the Dark Mode of Your Dreams with Color Science
28mTheming with Design Tokens
19mWhen colour theory meets technology
31mThe Lonely and Dark Road to Styling in React
18mBuilding dark mode with React Native at scale