Into the Dark

There’s a delicacy to designing photo products, because the images being organized or stored belong to each individual user, and represent personal memories or professional work. The ability to highlight and respect a person’s photos—without adjusting them— calls for an especially light touch. The Google Photos team kept this top of mind when implementing their own dark theme, opting to customize Material’s guidance to create a low-contrast approach that lets each photo shine. The background is rendered in a dark gray rather than pure black, because that saturation contrasts well against bright pixels to better express colorful photos, and icons appear in desaturated soft grays and blues for stronger legibility. The dark background even creates a slideshow effect that’s ideal for casual viewing—imagine turning the lights off at home to watch home videos or project vacation photos on to the wall.

Material Design’s color system hinges on pairing a primary and secondary color together, and then creating variations on those hues to make a full color set (you can give this a go yourself with Material’s inline color tool). But cast those same colors against a dark background, and they look dramatically different. Consider Google Calendar, in which everyone can customize their calendars from an infinite palette of hues, and where scheduling a multi-person event can get colorful quickly. Leveraging Material guidance, Calendar crafted an internal system for adapting a wide range of colors to dark theme, desaturating hues and defining brightness, while still letting users express themselves in any shade of the rainbow. The result is vivid color that feels native to a charcoal gray backdrop.

You can’t predict the day’s news. As with Google Photos, designers working on news aggregation apps have to work around unpredictable and changing imagery, though headlines and body copy are a welcome constant. A dark theme for Google News had to consider pixel-bleed, where small white letters contrast too heavily and blur against a dark background (imagine the inverse of ink-bleed on print newspapers, where black letters smudge on white paper). To cut down on blur, the design team utilized the same deep gray backdrop as Google Photos so that light gray text reads clearly, with minimal “vibration.” Gray surfaces also make it easier to create a gradation between shades, which results in surfaces that look elevated—a key element in any Material Design interface.

Drivers increasingly rely on screens such as vehicle dashboards, smartwatches, and phones to navigate or play music while behind the wheel. Android Auto smartly combines the most relevant media apps and Google Assistant for a more hands-free experience, and the introduction of a dark theme makes all of this safer to use when driving both during the day and at night. That’s partly because Android Auto operates on an OLED screen, which emits less light than traditional options—especially when rendered in dark theme—reducing glare for drivers. To further improve glanceability in dark theme, Android Auto also chose to keep graphics simple. Material guidance calls for using elevated layers of graphics to create an information hierarchy, but Auto uses fewer than most Material apps. This way, the driver doesn’t need to visually sort through as many levels of information, and eyes can stay on the road.