Member-only story

Designing dark mode

Design considerations for crafting a great dark mode.

Lukas Oppermann
UX Collective

Cover — Designing dark mode

In this article I discuss the key aspects to consider when designing a dark mode/theme. Everything from colors and shadows to icons and typography.

This is a two-part series:

  1. Implementing dark mode
  2. Designing dark mode

What is dark mode?

You can skip this if you have read part one of the series.

Dark mode is a dark theme that emits low levels of light while maintaining a high standard of usability¹. It achieves this by using dark greys and desaturated colors.

Users expect a product or website to offer a dark experience when their device switches to dark mode. It has become a baseline feature.

The main benefits for your users are:

  1. Reduced light, avoids eye strain and helps with conditions like cloudy vision or photophobia².
  2. Better battery life on OLED screens³.

There is no contrast standard for dark mode, it can be high or low contrast. As long as you are within the WCAG color ratios⁴.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Lukas Oppermann

Product designer with a love for complex problems & data. I post about Figma, design tokens, design systems & design related topics. https://lukasoppermann.com

Responses (3)

Write a response

Great article! Thanks for sharing all that knowledge!

Very insightful and comprehensive ! A must read article for all UX designers !

What about using two font weights, like book for light mode and regular for dark mode?