5 Easy Steps To Design a Dark Mode for Your Product
Get started designing a dark theme for your digital product.
- Inverse the text colour and the background colour.
- Take remaining colours and reduce their saturation and brightness by 10% — 30%.
- Reduce the brightness and saturation of images. (I use 60% brightness and 70% saturation.)
- Increase the contrast of UI elements until compliant with the Web Content Accessibility Guidelines.
- 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: