Checkmate has a light mode and a dark mode, and Color mode decides which one each visitor sees. Use it to keep your store light for everyone, or to show each visitor the mode their device is set to.
Color mode is the first setting in the Colors group. With Auto, the header shows the button that switches modes.
Let visitors switch between light and dark
With Auto, visitors switch modes with a button that shows a sun or a moon icon. In the header, it is the first icon in the row, before search.
1
Toggle
The button can show in three places:
Place
Setting
Default
The row of icons in the header
Light/dark mode toggle in the Header section
On
The right end of the announcement bar
Light/dark mode toggle in the Announcement bar section
Off
The top of the mobile menu, next to your logo
None. It always shows.
Always on
The mobile menu opens from Menu in the Mobile bottom navigation section, the bar at the bottom of the screen on phones and tablets narrower than 1000 px. Its button shows whenever Color mode is Auto, even with both settings off.
To turn the button on or off in the header or the announcement bar:
In the editor sidebar, under Header, select Header or Announcement bar.
Under Header icons, turn Light/dark mode toggle on or off.
Click Save.
Where a visitor's choice is kept
When a visitor clicks the button, their browser remembers the choice. On their next visit in that browser, they see the mode they picked, whatever their device is set to. The choice does not follow them to another browser or device, and it is gone if they clear their browser data.
If you change Color mode to Light or Dark, every visitor sees that mode, whatever they picked. If you later go back to Auto, visitors who picked a mode before see it again.
Checkmate has a light mode and a dark mode, and Color mode decides which one each visitor sees. Use it to keep your store light for everyone, or to show each visitor the mode their device is set to.
Auto (default)
Light
Dark
What visitors see
The mode their phone or computer is set to
Light mode
Dark mode
Button to switch modes
Shows
Hidden everywhere
Hidden everywhere
The colors of each mode are set in Change your theme colors.
Choose the color mode
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, click Theme settings.
Select Colors.
Under Color mode, select Auto, Light or Dark.
Click Save.
Color mode is the first setting in the Colors group. With Auto, the header shows the button that switches modes.
Let visitors switch between light and dark
With Auto, visitors switch modes with a button that shows a sun or a moon icon. In the header, it is the first icon in the row, before search.
The button can show in three places:
Place
Setting
Default
The row of icons in the header
Light/dark mode toggle in the Header section
On
The right end of the announcement bar
Light/dark mode toggle in the Announcement bar section
Off
The top of the mobile menu, next to your logo
None. It always shows.
Always on
The mobile menu opens from Menu in the Mobile bottom navigation section, the bar at the bottom of the screen on phones and tablets narrower than 1000 px. Its button shows whenever Color mode is Auto, even with both settings off.
To turn the button on or off in the header or the announcement bar:
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, under Header, select Header or Announcement bar.
Under Header icons, turn Light/dark mode toggle on or off.
Click Save.
Where a visitor's choice is kept
When a visitor clicks the button, their browser remembers the choice. On their next visit in that browser, they see the mode they picked, whatever their device is set to. The choice does not follow them to another browser or device, and it is gone if they clear their browser data.
If you change Color mode to Light or Dark, every visitor sees that mode, whatever they picked. If you later go back to Auto, visitors who picked a mode before see it again.
If customers tell you your store looks dark, see My store looks dark for some customers.