7 Ways To Use Dark Mode In Design
Dark mode design can work anywhere. From mobile apps to smartwatches to TV interfaces, this design trend can move your brand forward. Do it right and dark mode can work like gangbusters. Do it wrong and your design could turn users off immediately.
There are certain processes that need to work properly when creating dark mode UI. After all, you want your product to kick-ass, right? Let’s check off all the boxes on our dark mode best practices checklist:
1. Don’t go too dark
Book publishers don’t use pure white paper because the contrast with black ink is too stark. It makes you squint and can lead to headaches. The same goes for digital devices. Steer clear of pure black. It’s hard on the eyes to look at a high contrast screen. Good dark mode colors are shades of grey combined with desaturated colors.
2. Have proper contrast
Dark mode backgrounds have to be dark enough to show white text. The suggestion from Google Material Design is to use a text-to-background contrast level of at least 15.8:1.
3. Desaturate your colors
Keep away from fully saturated colors on dark backgrounds. The shades often seem to “vibrate” when viewed on dark surfaces. Instead, use desaturated colors like pastels and muted colors—shades that have grey and white added.
Also, consider adjusting your brand’s color palette. Your company’s blue might read differently on black than on white. Colors in dark mode often have to be tweaked to elicit the same response you’d get in light mode.
4. Use the right “on” colors
What’s an “on” color? One that shows up on top of elements and key surfaces. “On” colors are usually used for lettering. Dark mode UI default “on” color is pure white (#FFFFFF). Don’t use it. #FFFFFF appears to vibrate when viewed against dark backgrounds. Go with a light grey.
5. Don’t just reverse
If you’re switching to dark mode from standard mode, there are probably valuable visual cues in the original theme. Don’t simply invert the colors to get your dark theme. You might be turning colors that had a psychological purpose into meaningless muted colors. Be intentional about your color selection.
6. Get deep
The higher a layer is, the lighter it should be. This will create a visual hierarchy in dark mode that goes from the most used elements in your display to the least.
7. Test and offer freedom
Test both dark and light mode versions of your design. Experiment with each style and make the appropriate tweaks based on user feedback. Ultimately, people’s preferences can be unpredictable, so don’t pigeon-hole your users. Let them toggle their display from light mode to dark mode. This gives users the chance to control their own experience and let them feel more like an individual.
The dark theme revolution is just getting fired up. That means it’s the perfect time to go dark and get creative. Get ready to become a pioneer of dark mode!
Looking for someone to turn on the dark in your app? Why not check out some of our best app designers on Rtist?