Tips on how to decide if 'night' mode is right for your store — and how to make it look its best

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.

Considering going dark

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.

Photography considerations

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.

‘Night mode’ best practices

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.

• Most screens today — including desktop computers, laptops, tablets, smartphones or even wearables — use a backlight to make whatever is displayed on the screen visible.
• This backlight means that colors end up taking on a slightly different form than, say, colors printed on paper. Individual users can also adjust the level of backlight on their device, which can further make the “same” color look different.
• To that end, avoid using “pure” white (hex color code #ffffff) or “pure” black (hex color code #000000) — thanks to backlighting, using the purest form of either of these is simply too drastic of contrast for the human eye to read for an extended period of time.
• It’s also worth noting that LCD and LED screens cannot display pure black anyway (right now only OLED can do that), so even #000000 ends up being more of a very dark gray that can vary depending on the level of backlight.

When selecting a color palette to use in “night” mode, there are several factors and best practices to consider.

• Keep in mind that black or gray isn’t the only way to create a dark mode — darker shades of navy, dark chocolate brown, or even a deep forest green can all be good choices depending on the product line, suggests Sharon.
• With that in mind, look for a complementary color that packs a bit more punch that you can use on key calls to action — such as the “add to cart” button.
• That said, Sharon suggests avoiding selecting fluorescent or pastels against very dark backgrounds because they can end up appearing to “vibrate” to some viewers. These types of colors also often cannot hold up visually when surrounded by darker shades, which can reduce how visible they are. For example, she suggests using a light violet rather than an electric violet or pale lavender against a dark background.