5 Easy Steps To Design a Dark Mode for Your Product

Get started designing a dark theme for your digital product.

  1. Inverse the text colour and the background colour.
  2. Take remaining colours and reduce their saturation and brightness by 10% — 30%.
  3. Reduce the brightness and saturation of images. (I use 60% brightness and 70% saturation.)
  4. Increase the contrast of UI elements until compliant with the Web Content Accessibility Guidelines.
  5. Make all colours fit together. Use common sense or get a designer’s eye on it.

For my blog, I’ve used the Media Query ‘prefers-color-scheme’ to overwrite my default CSS variables.

Share this article:

Leave a Comment, Get Reply

No sign up required (enter name › 'post as guest').