Last Updated on by Dan S
Originally Published January 27, 2020.

Want to add a dark mode to reduce the eye strain for those midnight surfers? In this guide we will cover how you can add dark mode for your shoppers.

First things first. For those who don’t know what “dark mode” is, here is a quick explanation..

What is Dark mode?

Dark mode is a version of your website with heavily reduced glare caused by whitespace which is either activated manually by the user or automatically by the user’s browser/device.

This is a relatively new standard following on from the blue light practices to help reduce users eyestrain whilst operating devices over an extended period of time.

dark mode shopify store

Do I need Dark mode?

As a user, dark mode is a preference. The biggest uptake currently is usage within mobile apps. For example, Instagram has a dark mode which can be triggered by the users device settings.

Other options for users are to use browser extensions which either detect and activate a website or web apps dark mode. If the website doesn’t have a dark mode then the extension can invert the colours to achieve one. Whilst this doesn’t always achieve a true dark mode, it commonly gets you 90% of the way there which is a real win for the eye.

As a website owner, you should look to implement a dark mode if you site is heavy on white and you want users browsing your site any hours of the night.

Whilst browser extensions can handle this on your behalf, the execution of it isn’t always ideal. For example, if you have a minimalist black logo on a white background then this will be instantly lost. Most extensions will switch the background body to black but they won’t be able to swap your logo for a white version if its image based .

 

How to implement a dark mode

Currently, the best way to implement a dark mode is by changing your sites CSS depending on the request. This way, whenever your theme is triggered manually or automatically into dark mode, the CSS variation will kick in and deliver a dark mode.

There is a great guide by Sebastiano Guerriero located here which uses this method with variables. This is great for a web app or site that can implement the framework.

Unfortunately, there is no quick fix for a Shopify theme unless the theme’s developer has updated or implemented a dark mode.

Having said that, if you are familiar with CSS, then you shouldn’t find it too difficult to implement another method.

 

Implementing dark mode into an existing Shopify theme

There is good news. Using “prefers-colour-scheme” from the Media Queries Level 5 Specification, you can implement a dark mode of your themes CSS.

There is a great post here and it’s supported in all major browsers.

On a most basic level, the CSS code to implement this is:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

 

For implementing this method on Shopify, you should first backup your theme and download it.

Next, you want to open up the Styles sheet found under the assets folder (usually name style.css or themes.scss.liquid) in a text editor.

Note: if you are using a Sass sheet (scss) then you may want to implement a method found here.

If your main style sheet is .css then you want to go through it and identify the light hex codes/rgb for light elements, the dark hex codes/rgb for dark elements and duplicate them whilst wrapping them in the media query above. Your current setup will be for the “light scheme” and the inverted duplicate will cater for the “dark scheme”.

Once done, you want to save the sheet and load it up as a preview in your Shopify admin.

Depending on your themes structure and how well you identified the elements, you should have a solid dark mode for your store now. The logo probably didn’t change so you will need to look changing the image src based on the media query.

Finally, if you make use of Apps that add script tags to alter your stores frontend presence, unless they have implemented a dark mode, they are most likely still light. You will either need to override these in your CSS with !important tags or reach out to the developer of the apps in question.

 

Using an App to mimic Dark mode

There are some apps available from the App Store that can edit background colours and mimic a dark mode effect.

 

Summary

Dark mode is still very much emerging and won’t be “native” until a solid fundamental has been settled on and web/app developers adhere to the practices.