"Designing for dark mode is a bastard"

README.md

"Designing for dark mode is a bastard"

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

• Pretty hard to get enough contrast between background shapes and layers at different depths
• Shadows are so subtle
• It's hard to find a shade for paragraph text that's readable but not so bright it makes your eyes water. Gets even harder if you want headings to be a bit brighter or bolder.
• Brand color is almost always too bright or saturated to fit into a dark design
• Typical greens/reds/yellows that you'd normally use for success/danger/warning are also almost always too bright or saturated

Solutions that have worked for me in the past

Tailwind palettes' 900-level colors 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:

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:

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:

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.

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:

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',
  }
}

A sweeping conclusion

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, erase all the text and icons, and turn off your imaginary light. Wait a minute for your pupils to dilate. That's the foundation of your dark design.

Add the text and icons back in, but not with inverted colors. Instead, imagine they were originally drawn with glow-in-the-dark ink, so they'll be visible, but not blindingly bright.