Booklet
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