Dark Mode Tips
Here’s a short list of the best Dark Mode Tips in 2021
Dark Mode is a UI trend that won’t be going anywhere anytime soon, as it both looks great and has several user benefits including decreased power consumption for your device, increased legibility in low light and it reduces eye strain.
While some companies are ahead of the curve and are incorporating dark mode into their current interface or design systems, some are just starting the process. So, if you’re a designer working on a Dark Mode project for work or a personal project, here are some quick tips to get it done fast and make it look great.
Tip #1: When selecting your Dark Mode colors, use dark shades for background elements, and light shades for components, buttons and text that will appear closer.
- Try #121212 (Dark Grey/Black) or #191C2F (Dark Blue)
Tip #2: Establish Test Hierarchy using a soft white or grey scale to compliment the background.
- Try #F5F5F5 ore FAFAFA for Primary Text /Headers
- Try #BDBDBD or # 9E9E9E for Labels / Sub-labels
- Try #757575 or #616161 for Secondary Text
Tip #3: Establish your Primary Colors, Secondary and Accent Colors
Check out the Material Design — Dark Mode usage guidelines for more details.
Tip #4: Consider Contrast
Use a contrast checker, like the one here at webaim.org to make sure your background, primary and accent colors do not clash. Ideally your accent colors should be pleasant, does not vibrate against the background and allows text to be readable.
Tip #5: Lean Toward Minimalism
Dark Mode is great for enhancing stunning visual elements, products or photography. Strip away any unnecessary background layers, shapes or images to not take away from the content in the foreground.
Keep in mind Dark Mode while it looks beautiful and has been known to reduce eye strain it does not entirely help with legibility or accessibility. According to Apple’s human interface guidelines, dark mode allows the “content to stand out while the surrounding UI recedes into the background.” So be sure to use this aesthetic intentionally to highlight or enhance your interface, without distracting the user from key content and information.