The Turbo Shopify theme introduces a new look for the Chicago style with two built-in presets that let you switch between a light and dark mode: “Day” and “Night” — but what are the advantages and best ways to use a “dark” look over a lighter one?
The words “day” and “night” are, as you might imagine, a reference to how much “light” there is in each look — in this case, “light” is referring to the use of brighter colors as well as whitespace.
Conversely, a “night” option typically uses darker, more muted colors along with grays and black.
“Night” modes have become popular on operating systems, apps and other user interfaces.
Using a dark “night” color scheme is also possible in any Shopify theme or using any style — not just Turbo’s Chicago style — typically by updating the colors in the theme settings.
When deciding the route to go — light vs. dark — for your Shopify store, a good place to start is considering what content you’re showcasing.
“A dark background can be dramatic and striking and nicely offset your visual content, allowing it to really ‘pop’ out and draw attention to your photos, illustrations and videos,” notes Sharon Austin, Out of the Sandbox’s Design Director.
This lets you create a clear and strong “visual hierarchy” that allows your content to stand front and center.
Meanwhile, a dark look can still be accented with colors. Both the hue and its value of lightness or darkness of that color can convey a lot about your store’s mood.
“In these cases, it can therefore be chosen and used strategically in your shop as a way to visually communicate your brand’s style and outlook,” says Sharon.
Ultimately, it’s important to consider whether a dark color palette is suitable for the type of products in the store and the general vibe you want your customers to experience while browsing.
Sharon also emphasizes that black or very dark colors can evoke strong emotions — both positive and negative.
“On the up side, they can come across as sophisticated, sexy, elegant, avant garde, mysterious, powerful or prestigious,” she mentions. “On the other hand, dark colors can also be associated with negative things like death, mourning, fear, sadness, authority or depression.”
After considering these points, Sharon advises on making sure you’re leveraging the dark scheme to your advantage and that it accurately represents the mood you want visitors to feel and, ultimately, if it will attract the right types of visitors you can convert them into customers.
A darker color scheme can work, for example, on stores ranging from a high-end perfume brand, edgy rock band merchandise, sleek electronics or fine art prints.
On the other hand, it might not work as well for aspirational lifestyle brands, children’s toys or apparel, food items or home decor.
At the end of the day, it’s vital to not to fall into the trap of using a dark color scheme just because it’s a current trend — or that it might just make your store look “cool.”
Another key factor to consider is the amount of text your site uses, notes Sharon. In general, Shopify stores with high text density aren’t good candidates for a darker color scheme — namely because large blocks of lighter text on dark backgrounds can quickly become very difficult to read.
If you already have product photography that’s been isolated on light or white backgrounds and your current look is lighter, switching to a dark background may require you to remove the white areas image by image, which can be painstaking.
If your photographs already include “isolation paths” or transparent backgrounds, you might be able to make the switch easily.
You’ll want to verify the quality of the paths or transparency, however, by placing the image, in a transparent format such as PNG, against a dark background to ensure there is a “halo” or artifacts around the edges.
You’ll also want to consider dominant colors in your products. If, for example, you sell a lot of products that are black or dark gray, putting them against a black or dark gray background will likely make them very difficult for customers to see.
A possible workaround to this is to add contrast by using lighter grays or even pops of colors as backgrounds instead of white.
If you haven’t invested in product photography yet or are planning to reshoot everything, be sure to communicate that with your photographer or keep in mind how you shoot them.
If you ultimately do decide a dark color scheme is right for your Shopify store, it’s time to start digging in and making more specific decisions.
While designers generally encourage high contrast colors to improve legibility, things work a bit differently with most device screens out there.
When selecting a color palette to use in “night” mode, there are several factors and best practices to consider.