Over the past several months, many Google apps have adopted dark themes with the google app and gmail likely coming next. Google today detailed how the teams behind Photos, Calendar, and other first-party services designed their dark modes.
Google Photos
At the moment, the Google Photos dark theme is only available on Android Q. The team approached the dark design with a “light touch” as to not detract from the pictures being displayed
he 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.
Google Calendar
Calendar is a particularly colorful app as you can theme events to make them stand out in the agenda view. According to Google, those colors “look dramatically different” against a dark background.
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 News
The text-heavy nature of articles presents a different problem for google news
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.
Android Auto
Coming this summer, the Android Auto redesign notably introduces a Google-designed dark theme that helps match car interiors. It is also safer to use when driving in both day and night conditions by reducing glare.
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.