Should Your Site Be Using Dark Mode?

Taking a stab in the dark is taking on a new meaning with the rise of dark mode design. One of the most requested features over the past few years, both Apple and Google have made a dark theme an essential part of their UI. But why is this? What are the benefits? Are there any pitfalls? These are the top things to consider when designing for dark mode…

Why Use Dark Mode At All?

We are on our phones almost constantly. The average person spends over four hours a day on their device and scrolls the height of mount Everest every year. These stats aren’t particularly shocking, and it only takes a walk down the high street or a journey on public transport to see almost everyone with their necks bent, staring intently at screens. We use phones for everything from phone tickets to entertainment, meaning we need them at all times. This is where dark mode can help…

[pullquote]The average person…scrolls the height of mount Everest every year[/pullquote]

It Can Reduce Eye Strain

Apart from the aching neck and slight cramp of the thumb, being on our phones so often is also bad for our eyes and it’s predicted 2 in 3 will experience eye strain caused by excessive phone use. Dark mode is here to help with this, making the screen easier to see in low lighting such as in the night or early morning. It can be a lot easier on the eyes, causing less strain and is better in the long run.

It Can Save Battery

Dark mode has also been found to improve battery life. According to a recent test conducted by PhoneBuff, iPhone batteries can be extended by up to 30%. This is only true, however, if users have an OLED screen. This is where the pixels that are black draw no power, whereas the LCD counterparts draw the same amount of power no matter the color they are displaying.

You Can Play Around More With Designs

By implementing dark mode to a site, you can have a play around with different features. It’s about a lot more than just inverting white to black. You can play around with the colors and the look side by side and see which looks better. It could mean you are inspired for certain changes with the light site too.

Things to Consider

Switching to dark mode isn’t a magic fix, and it isn’t right for every project. It’s important that you consider the use of dark mode carefully.

Focus on Your Content

Dark mode puts more of an emphasis on the content areas of your interface, allowing certain content to stand out, while the surrounding areas fade more to background. It’s important to remember this when designing for dark mode and ensure the content which will be at the forefront has a strong focus.

Test Your Design in Both Light and Dark Mode

We’ve already established you can’t just invert your colors to make a site work in dark mode. But you can’t forget to test your sites in both modes too — after all, you don’t want the two interfaces to be so aesthetically different you can’t tell they are the same site, or that users get confused.

Work Out Your Color Palette

Ensure your default color palette is defined by function and not by color — don’t be afraid to add in new colors that work better. In dark mode you will be working with a color palette that has lighter foreground colors and darker background colors. Find a soft color scheme that works well and doesn’t have too many colors to it — it’s best to keep it simple. If you need a white background, ensure it is a slightly darker and softer white, so it prevents the background from glowing against surrounding dark content. Best practices recommend using a contrast level of at least 15.8.1 between the text and background.

[pullquote]Light text on a dark background can appear bolder…use a lighter weight for dark mode[/pullquote]

Don’t Forget The Text

You need to ensure the text is still legible if the user turns the screen brightness to its lowest. After all, you want it to be dark, but still usable. Check if it has enough contrast and certain elements that are meant to be distinguishable from each other, are. Ensure the primary and secondary colors are separate from each other and easy to separate. Light text on a dark background can appear bolder than the other way around, so you may want to use a lighter weight for dark mode — experiment and see what looks best.

Ensure Users Can Switch Between Regular and Dark Mode

Some companies have adopted the approach of letting the system decide when to turn off and on the dark and regular theme, switching between the two when it thinks is best. This can be frustrating for the user and leave them not wanting to use the site or programme anymore. While it may be designed for optimum usage at certain times, let users make up their own minds and have control. Some may prefer to use dark or light mode all the time and not want to switch around; allow users to turn the dark theme on or off easily and based on their needs. Make the switch easy to find or users may get frustrated and close the site.

Ensure the Target Audience Are Kept in Mind

Before jumping straight into re-building an interface to the new dark-mode, it’s important to consider who the users are. If they are a younger and more chic audience who are on their phones more during the day and evening, dark mode is probably a good idea, however if they are older and more traditional, they will probably prefer the more “paper-like” interface. Do some research and figure out who uses the site and what for. Dark modes tend to decrease readability so is less likely to do well if the site in question is a blog or news piece. If it has simple content or is focused heavily on images or video, dark mode works well – Netflix is one of the best examples of this.

Pitfalls of Dark Mode

Dark Mode Doesn’t Work Well For All Sites

If the site you are designing is a very text-heavy or data-heavy or contains a vast variety of elements such as text, images, data and dropdowns etc. it can be a challenge to design. The main reason for this is trying to maintain a sufficient contrast which works well for all elements. Generally, all colors (except the palest, which are hard to see) work on a white background, whereas a dark background greatly eliminates the amount you can use.

Dark Mode Isn’t Always Better Eyes

While it can be better for those using regular mode in situations were light is softer (such as when you are going to bed or waking up), it has been found dark mode doesn’t always fix the problem. In bright light conditions the text can appear washed out which actually increases eye strain.

Dark Mode Might Not Align With Existing Branding

Due to the fact you need a more restricted color palette and many logos are designed with a white background in mind, dark mode might not align with a company’s existing branding. When the platform has many elements, this can be challenging, and the site may seem very inconsistent when switching modes.

Dark Mode Doubles Your Workload

As a designer, there is already plenty to be done when it comes to designing a site in normal mode, without the addition of a whole new site too. While yes, core elements are the same, it will still need to be re-worked and altered to sufficiently adapt to dark mode. This is a whole extra segment to the job which might not have been accounted for.

Featured image via Unsplash.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.