Into the Dark
Explore new color palettes, revamped contrast, and increased legibility as four Google products adopt Material’s dark theme
At the dawn of computing, screens were pitch black. Even if you never used these early terminals, you can surely envision them: monospaced letters and numbers, flashing fluorescent green against a dark expanse of nothingness, powered by basic cathode ray tubes and a coat of phosphor. Nocturnal coders, engineers, and those with ocular conditions have long favored the solace of these dark interfaces, for relief from too-bright screens that cause eye strain and for the immersive environment they provide.
Today, new darkened UIs are cropping up across the internet and in operating systems, and they’re more sophisticated than ever; Material’s recently released dark theme guidance considers color and shading in a way that wasn’t possible with those primordial terminals. Made with low-light environments in mind, Material’s darkened design system rethinks contrast and color saturation so that interfaces appear as beautiful as they do legible, all while carefully preserving brand identity. Every app or product will adopt dark theme a little differently: Google Calendar created a new, expressive color system, Android Auto prioritizes glanceability, and Google Photos and Google News focus on carefully-chosen contrasts that let third-party content sing. Read on to learn more about how these products interpret and implement dark theme—and how you can too.
Imagery: Preserve vibrancy with low-contrast grays
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.
Color: Keep it emotional but legible
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.
Google Calendar’s dark theme relies on a color system that’s desaturated, but still expressive.
The dark gray background lets Google News showcase headlines and images, with longform readers in mind.
Content: Reduce high-contrast blur for better reading
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.
Hierarchy: Simplify UIs for glanceable information
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.
Each of these products highlights key principles of Material’s dark theme—using smoky grays to reduce eye strain and pixel-bleed, desaturating colors while keeping their emotional resonance—but Material Design’s dark theme guidance goes even deeper. Explore recommendations on everything from creating shadowy elevation with multiple surfaces to adapting illustrations to feel more “nocturnal,” then get started designing and developing your own dark theme experience.