fbpx

Last Updated on

Want to add a dark mode to reduce the eye strain for those midnight surfers? Here’s how you can.

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.

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.

 

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.

 

About LaunchTip

LaunchTip was born out of a necesity to extended functionality on the Shopify platform. Built by merchants for merchants.

Learn More

Leave a Reply

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound

Get the #1 Upsell App which has generated over $20m in Upsells!   Get App

Improve your Shopify Sales NOWGet our Free Email Guide on what you can do right now.