My store looks dark for some customers

Checkmate has light colors and dark colors. With Color mode set to Auto, which every Checkmate style starts with, each visitor sees the colors that match their own device, so some see the store dark. You can show the light colors to everyone.

Rule out the cache and the wrong theme

If colors you changed in the editor don't show on your store, and your other recent changes don't show either, start with My changes don't show on my store. What the theme controls and what Shopify controls explains which pages, such as checkout, take their colors from Shopify instead of the theme.

The visitor's device is in dark mode

This is the most likely cause. With Auto, a visitor whose phone or computer is set to dark mode sees the dark colors. You can recognize this cause by turning on dark mode in your own device's settings and opening your store.

To show the light colors to every visitor:

  1. In your Shopify admin, go to Online Store.
  2. Next to Checkmate, click Edit theme.
  3. In the editor sidebar, click Theme settings.
  4. Select Colors.
  5. Under Color mode, select Light.
  6. Click Save.
Colors group in Theme settings with Color mode set to Auto and the six swatches of the Color palette

With Light, the light and dark mode toggle disappears from the header, the announcement bar and the mobile menu. Choose light, dark or automatic color mode describes each mode.

The visitor switched to dark with the toggle

With Auto, the header shows a button with a sun or a moon icon that switches the store between light and dark. The mobile menu shows it too, and so does the announcement bar when its Light/dark mode toggle is on. The browser remembers the visitor's choice and shows the same colors on every later visit, whatever their device is set to.

You can recognize this cause when one person sees the dark colors on one browser and the light colors on another. The visitor can click the toggle again to go back to light. To stop the switch for everyone, set Color mode to Light with the steps in the previous fix.

To keep Auto and hide the button from the header only, turn off Light/dark mode toggle in the Header section. The mobile menu keeps its toggle, and visitors who already switched keep their choice.

Color mode is set to Dark

With Color mode set to Dark, every visitor sees the dark colors. You can recognize this cause because the store is dark for you too, in every browser. Select Light or Auto with the steps in the first fix.

A section turns the page dark while you scroll

A section with Dark moment turned on makes the whole page dark while that section is in the middle of the screen, for every visitor. You can recognize this cause when the page starts light and turns dark only while you scroll past one section. To stop it, select the section in the editor, turn off Dark moment under Motion, and click Save. Section motion settings describes the setting.

Contact support

If the colors are still not what you expect, write to us through Contact support and include:

  • Your Checkmate version. Find your theme version shows where it is.
  • A preview link to the theme.
  • The URL of a page that looks dark.
  • A screenshot of the page, and the device and browser it was taken on.

Was this article helpful?