“How do I choose colors for dark mode?”

Asked on: 2021-03-01

Hello! This is a fantastic question. Dark mode is a pattern that not many UX designers are (understandably) well versed in. Here are some tips to choose dark mode colors:

  • Start by looking at apps/web apps that have implemented dark themes well, and take them apart.

  • Some apps (twitter) have TWO dark modes to choose from - pure black (supposedly good on OLED screens where black is really black), and dim (which tends to shift a bit toward blue.

  • Instead of pure grays, try pushing the saturation towards blue for a gunmetal/cool gray for a less harsh/dull look.

  • If you only have one dark mode (and not two like Twitter), it’s your aesthetic choice but many apps choose to go for a blueish dark mode. If you do this, try not to have the background pure black - this way you leave yourself a bit of room to have one step darker tone available for drop shadows etc.

  • On shadows - transparency can be much higher than on light themes (60%+), otherwise the shadows aren’t visible against a dark background.

  • Colour weights from 050 to 900 are a nice concept in general - you can use the same base colours on light and dark thems, and just pick different weights of the same colours for your components on your dark and light themes. In my experience this works better than one off colours (or fancy colour names for each colour) in a design system. Check out https://tailwindcss.com/docs/customizing-colors as an example of good base colour weights.

  • Pure white on a dark background is very bright/contrasty - reserve that for special occasions, not for body text.

  • How to get started - with a good 050 to 900 palette of “cool” grays, clone your light theme components, and start switching the colour styles to the dark versions until satisfied.

♥️ ♥️ ♥️,
Ask a designer team