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.


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.
Contributors
