Dark mode

Topic

One of the largest growing trends of 2019, dark mode has taken the user interfaces by the storm. The ability to make the switch over a screen easier on the eyes at night has been increasingly demanded as a necessity in a product.

For a designer, dark mode is larger than just flicking a switch and inverting some colours. The accessibility options completely change and your shades for structure and layout need to be re-evaluated - just for starters.

Take a look below to see what you need to consider, implement and check off as the wave of customers are knocking on your door demanding the 'sleeker' version of your app already.

Checklist

Adaptable color palette

What your product looks like visually with a dark setting

⭐️ A grey for your darkest color is more flexible in shadows and contrast than black

⭐️ The lower the saturation, the more accessible a color will be

⭐️ Ensure dark palette for backgrounds must allow white to be accessible

Brand integrity

Maintain your visual tone and style

⭐️ Invert monotone visuals

⭐️ Incorporate colours from your brand that are also present in light mode

Elevation

A way to structure elements to establish heirarchy

⭐️ Use lightness over shadows to give focus to certain containers or elements

Optional

Switch to light mode

Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two.

🌑

Dark mode

Topic

Checklist

Optional

Inspiration

Articles

UI Design in Practice - dark mode

8 Tips for Dark Theme Design

The Ultimate Guide on Designing a Dark Theme for your Android app

Systems

Google

Apple

🎨

Colors

🎚️

Responsiveness

✍️

UX writing

🔤

Typography