1. React
  2. React Boston
  3. 2019
  4. Building the Dark Mode of Your Dreams with Color Science

Editor's Choice

Building the Dark Mode of Your Dreams with Color Science

Information-rich talk on color science, with practical examples on how to design a dark mode.

Ryan Struhl at React Boston 2019

With iOS 13 and Chrome 76, a majority of people on the web will have the option to switch their browsers to 'dark mode' for the benefit of both the visually impaired and code vampires like me. While transitioning applications to have alternate color modes won't be easy, there are a couple of techniques that developers and designers can use to make it as simple as possible. In this session, we will introduce some concepts from color science like luminance, contrast, and chromaticity to help build better, more accessible patterns for color in our applications. We will then look at how to use these patterns in React to build out a sweet looking dark mode for an application. This talk is for developers and designers of all skill levels who are thinking about how to build a dark mode for their application or just want to level-up their understanding of color. You will come away with practical patterns to help improve the design consistency and developer experience across light, dark, and every color mode in-between.