4 Ways To Design For Dark Mode

4 Ways To Design For Dark Mode

Dark themes are HOT.

Benefits include:

1. Reduce eye strain

2. Easier to read in low light

3. Decrease battery consumption

However, they're quite difficult to actually implement. We CANNOT simply reuse colors or invert shades.

So, here's how to design dark themes that are readable, balanced, and delightful

1. Darken distant surfaces

The closer the layer is to the user, the lighter the surface area and vice versa.

Why? Because this simulates our real world in which the light source is usually casted above.

2. Ensure enough color contrast

Screen elements should follow at least WCAG AA standards which require contrast ratios of 4.5:1 for normal text and 3:1 for large text.

3. Avoid pure black

True black doesn't exist in our real world. So, #000000 (pure black) can feel jarring. Black smearing might occur when lighter content is dragged or scrolled.

4. Deepen colors

DON'T just simply invert colors. This may cause our accents and buttons to appear too dark or too bright. We must adjust these colors to work better for the new dark theme.

Summary

1. Darken distant surfaces

2. Ensure enough color contrast

3. Avoid pure black

4. Deepen colors

FOLLOW OUR INSTAGRAM

@hackuniversity

youtube.com/HackUniversity

tiktok.com/@HackUniversity

facebook.com/TheHackUniversity