Google has had dark themes in work for a long time, with YouTube being one of the first apps to receive an optional alternative design back in 2018, followed by a plethora of other Google apps. The company had also experimented with system-wide dark themes before, as Android 8.1 Oreo was the first version to come with limited automatic theming options based on your wallpaper, followed by a toggleable theme switcher in Pie. With the announcement of a proper dark mode in Android Q, Google now officially commits to supporting two themes, and with that, the company shared how its developers created the toned-down versions of their apps on Thursday.

On a dedicated website, Google Design showcases four apps that have recently received the dark mode treatment: Photos, Calendar, News, and (the live-or-not-live) redesigned Android Auto interface.

The Photos team took a light, unobtrusive approach to darken its app's interface, consisting of two elements: in the gallery view, the background is a dark gray in order to reduce contrast, while it goes completely black once you view a photo full-screen to give you that slideshow projection feeling (also, we should note that the background is pure black in the white theme, too). This serves as a good example that design guidelines are just that in the end — guidelines. While they discourage the use of pure black, sometimes it only makes sense.

Similarly, the Calendar team quickly ran into legibility issues, but they could be averted by strictly applying the guidelines: custom colors created by users are intelligently converted to desaturated hues, so they pair nicely with a gray background. Vibrant colors would lead to fuzzy-looking edges which the developers wanted to avoid.

Google News turned out to be challenging because of its reliance on external content from news outlets. Problems include icons that don't have proper transparent backgrounds, leaving them with a white outline like USA Today in the GIF above and featured images that could turn out to be jarring among dark colors. Similarly, Google couldn't just desaturate logos as they did with the custom Calendar colors since they're protected properties. The developers compare another issue to print newspapers, where letters can ink-bleed and smudge on white paper. The opposite is true for screens, where white text on a black background can appear fuzzy and undefined (AKA pixel-bleed). To combat this, the team chose a lighter gray color that reduces contrast, similar to Google Photos' gallery.

I'd like to note that the presentation of websites without AMP versions (like our own) is not optimized according to Google's guidelines at all, though. There's a pure black background, illegible logo, and jarring bright blue link colors — apparently, there's still some work ahead for the News developers.

Last but not least, Google gives us a sneak peek at its upcoming Android Auto redesign, which comes with a dark mode. Here, it was vital to provide easily glanceable information, so the team had to make the interface as intuitive and straightforward as possible. By using Material Design's elevated layers (meaning different shades of gray), the team could easily achieve information hierarchy. Here, too, a black background encompassing these layers proved to be the most sensible solution, as drivers should be blinded by as little light as possible when driving at night.

Google shared this insight into its design process to provide guidance to other developers. There are many misconceptions around dark mode, with many enthusiasts believing that pure black must be better than gray since it turns OLED pixels off completely (which saves nothing but a neglectable rounding error of power more than gray, as XDA Developers proved). Instead, the company highlights how readability and information hierarchy is more important than the (tiny) energy saving aspect when theming apps.

We can only encourage you to check out Google's website in the source below. It serves as a good example of how to use dark mode, too, as it adheres to the same standards as gray-ified apps.

Source: Google Design