Designing for dark mode is a bastard

Published almost 2 years ago

James McDonald, a professional designer and Tailwind team member, made a painfully accurate observation that designing for dark mode is a bastard.

So is there any hope for developers like me? I've got a decent eye for aesthetics, and I read Refactoring UI as much as the next dev, but I most definitely don't have any formal design training.

Well, for what it's worth, I wrote down what I think is hard about dark design, and some solutions I've leaned on in the past.

Hard stuff in dark design

Solutions that have worked for me in the past

Design your dark theme in a dark area, and design your light theme in a light area.

This is honestly the most important advice. I've spent so much time fiddling with dark designs in a light room, just to return to it later at night and discover that it's way too bright.

Check to make sure your dark design looks decent in light surroundings, but that should be the final tune-up step, not the bulk of your design work.

Tailwind palettes' 900-level shades get to to a lightness of 20-35%. Add 3 to 5 shades, pushing down to 7-12%.

Warmer and more saturated palettes require lower lightness. Radix colors exemplify this:

Radix colors

Accept that dark UI is utilitarian and will be neither as unique nor as branded as light UI. Big, colorful logos in dark UIs are wildly distracting. Broadly speaking, you have two reliable approaches to pick from.

The first is to use a very desaturated dark palette with small splashes of brand color. Twitter's "Lights Out" theme is a good example, literally using #000 for the background color, and a 0% saturated color for text, icons, and the Twitter logo. This approach is especially well-suited to warmer colors whose dark shades might look strange, or just too unconventional:

Twitter dark mode

The second approach is to use more saturated dark colors whose hue is similar to that of your brand color. This generally works pretty well for cooler colors. Netlify's dark UI is a good example, with dark colors that use a blue hue you can find in the Netlify logo, but that is still visibly close to Netlify's more recognizeable teal:

Netlify dark mode

Opportunities for splashes of brand color include borders, tiny background shapes, checkbox checks, radio button selections, the occasional primary button, outlines for focused inputs.

If your brand color is particularly bright, use it as part of a gradient with a darker shade.

Gradient with darker brand color

Add shadows as desired, but keep in mind that their visual effect is extremely subtle. Contrast between your 700 to 1400 shades (~45% lightness down to ~8% lightness) plays a much bigger role than shadows in creating depth. To see this in action, check out a dark design I was working on recently, which was super difficult due to many variations in depth:

Contrast is better than shadows

That UI uses tons of box shadows, but the contrast between dark shades is the primary indicator of depth.

Here's the Tailwind-config-ready custom palette I designed for that UI:

{
  denim: {
    '50': '#EAF3FB',
    '100': '#DDECF9',
    '200': '#CADCF0',
    '300': '#AEC4E1',
    '400': '#7C94B8',
    '500': '#4E608B',
    '600': '#324066',
    '700': '#232E4C',
    '800': '#1B2540',
    '900': '#151F36',
    '1000': '#0F1729',
    '1100': '#0C1221',
    '1200': '#080D17',
  },
  // Custom "danger" color
  cranberry: {
    '300': '#FED7D7',
    '500': '#F58686',
    '700': '#AD4040',
  }
}

Don't invert

To repeat what many others have said, dark UI is not a straight up inverted light UI.

Imagine that a light design is only light because you're shining a bright white light at it. Now turn off your imaginary light. Wait a minute for your pupils to dilate. That's the foundation of your dark design. The background colors are darkened versions of the original light shade.

Text will be super dark now, so that's the first thing to fix. Imagine the text was originally drawn with glow-in-the-dark ink, so it'll be visible, but not blindingly bright.