AndPlus acquired by expert technology adviser and managed service provider, Ensono. Read the full announcement

Designing for Dark Mode

Nov 12, 2018 9:10:00 AM

shutterstock_1012051321 medThe world, it seems, is getting dark.

It’s not for want of sunlight or electricity to power our myriad lighting devices. (Indeed, light pollution is considered by many to be a growing problem with environmental and public health implications.) It’s an aesthetic preference for darker colors in our daily lives. Our kitchen appliances have gone from white to black or unpainted stainless steel. Computer cases, for which “ivory” was once de rigeur, are now almost universally black or some shade of dark grey. Look around on our roads and you’ll mainly see cars that are black (even matte black), grey, or some muted shade of silver.

This trend is not lost on Apple, which introduced its Dark Mode user interface color scheme option in MacOS Mojave, catering to the user experience (UX) many are pining for these days.

What Is Dark Mode?

Dark Mode is a setting that Mac users can choose that colors everything on the screen—windows, user interface controls, backgrounds, views, menus, everything—from a palette dominated by darker colors. Instead of seeing dark text on white or off-white backgrounds, users see white or light grey text on dark grey or black backgrounds. Users can make Dark Mode the default setting, and can switch back and forth at any time. Apple’s designers carefully chose the Dark Mode palette so that users can view their screens comfortably without eyestrain in all lighting conditions.

Another feature of Dark Mode is desktop tinting, which enables window colors to become somewhat lighter or darker to reflect the colors in the user’s desktop picture. Apple describes the result as “a subtle tinting effect that helps windows blend more harmoniously with their surrounding content.” Users can turn this feature on or off as desired.

Implications for Designers and Developers

Dark Mode UX presents some challenges for developers and user interface designers, especially those engaged in cross-platform development:

  • The “easy way” to design for Dark Mode is to use specific colors designated by MacOS to automatically adjust to the user’s choice of Dark Mode or not. That’s great if you’re designing only MacOS applications, but it might not translate well to Windows or Linux.
  • Even within MacOS, if your application relies on having colors that don’t change, choosing static colors (or a mix of static and Dark Mode-responsive colors) might look terrible in Dark Mode, or regular mode, or perhaps both.
  • If you don’t like the choices of colors that automatically adjust to Dark Mode, it’s tempting to simply use your preferred static colors and invert them (that is, flip each one to the opposite color in the color wheel) on the basis of the user’s choice. This will rarely work out; often it will cause low contrast (or jarringly high contrast), ugly color combinations, unreadable text, and invisible controls.
  • Apple also encourages the use of MacOS template images wherever possible, because they also automatically adapt to Dark Mode. This, too, might not translate to other OSs, requiring an increase in the amount of platform-specific code.

Apple does not require developers of MacOS apps to adhere to the published color scheme guidelines, but failing to do so runs the risk of having an application that looks peculiar, or worse, on the same desktop as other applications.

In any case, Dark Mode requires designers to perform additional testing to ensure applications look good (or at least acceptable) under all combinations of MacOS user settings.

Joining the Dark Side

So, if you’re a developer or UI designer, or are contemplating building a desktop application, then eat some dark chocolate, drink some dark roast coffee, and lay in a supply of dark beer, because the darkness is coming to an OS near you, and you need to be ready for it. Perhaps someday we’ll get over our collective fascination with dark, and return to flat, primary colors and sharply rectangular control shapes for our user interfaces (oh, wait – Microsoft is already there with its latest versions of Office), but for now, UX design is evolving toward the dark. Meanwhile, for MacOS applications, there’s no need to be afraid of the dark; just budget a little extra time for manual UI testing to make sure the colors work at least tolerably well under all conditions.

Learn More!

The world (or, at least UX design) may be getting darker, but with some good planning and design, there will always be light at the end of the tunnel.

Topics: Apple UX

Matt Hull

Written by Matt Hull

Matt leads AndPlus' creative and user experience practice and his focus on human-centered design has been honed over the course of his 20+ year career in web development. With experience across a wide range of industries and technologies, Matt’s ability to keep the user at the forefront, while serving their needs through technology, is a vital component to every client solution. Matt and his team bring passion, creativity, and innovation to every client project and, ultimately, to every user experience.

Get in touch