Skip to main content
Kelvin has a light and a dark mode across the whole store. Every color scheme holds both a light and a dark palette, so each section changes with the store and you never set a mode per section. Shoppers switch with a small monitor in the utility bar.
The home page in dark mode

The home page in dark mode

How the mode is chosen. Before the page paints, so shoppers never see a flash of the wrong colors, Kelvin uses:
  • the shopper’s own choice from the switch, saved on their device (used only while the switch is shown);
  • otherwise Theme settings → Colors → Default color mode: Auto (follows the device), which is the default, Light or Dark.
With Auto, the store follows the light or dark setting of the phone or computer, and keeps following it while the page is open (for example when a phone turns dark at sunset), as long as the shopper has no saved choice. The switch. One monitor at the end of the utility bar on every page, and in the top bar of the password page:
  • screen on, with a green power light, is light mode;
  • powered off, with an amber standby light, is dark mode.
A click or tap changes the mode. Keyboard users reach it with Tab and press Space or Enter. Screen readers hear a switch called Light mode that is on in light mode and off in dark mode, followed by a short Light mode on or Dark mode on message.
The monitor switch in light mode

Light mode: the screen is on

The monitor switch in dark mode

Dark mode: the screen is off and the standby light is amber

The animation. Turning the store dark plays a short power-off: the picture folds to a line, then a dot, and goes dark. Turning it light plays the reverse. Each takes about half a second, and the page colors cross-fade in browsers that support it. Shoppers who ask their device to reduce motion get the new mode at once, with no animation. There is no Auto button. The switch has two positions. When a shopper picks the mode the default would show anyway, Kelvin clears their saved choice, so the store follows the default again (and the device, with Auto). Any other pick is saved on the shopper’s device. Hide the switch. Untick Theme settings → Colors → Show the color mode switch. Then:
  • the monitor leaves the utility bar and the password page;
  • every visitor gets the Default color mode (with Auto, the mode of their device), including shoppers who picked a mode earlier: their saved choice is ignored while the switch is hidden, so nobody is left stuck in a mode they cannot change;
  • on phones under 750 px the utility bar is hidden, since the switch is all it shows there. Tablets and desktops keep the bar with its perks and links.
Logos and images for dark mode.
  • Store logo: add a light version in Theme settings → Logo → Logo for dark mode. It is used only when Logo is set too. A text logo needs nothing: it takes the text color of each mode.
  • Brand and press logos: the Logo blocks of the Brands section and the Quote blocks of the Press section each have a Logo for dark mode. Kelvin never recolors a logo.
  • Password page: with Dark top bar on, the Password page uses Logo for dark mode.
  • Photos and films are the same in both modes. Product photos with a transparent background sit on the card’s own backdrop in both modes; photos on a white background show as bright tiles in dark mode.
Check both modes in the theme editor.
1

Use the switch in the preview

Click the monitor in the utility bar of the editor’s preview. Your pick is saved in your browser, just like a shopper’s, so it also applies when you visit your store in the same browser. Click it again to go back.
2

Or change the default for a moment

Set Theme settings → Colors → Default color mode to Dark, look through your pages, then set it back. If the change seems to do nothing, your own saved pick wins: click the monitor until it shows the default mode, which clears your pick.
3

Look at the places that use other schemes

The header and footer (Card), the utility bar, Vertical films and PC Builder entry (Stage), any Signal band, a product page, the cart drawer and the mega menu.
4

Outside the editor

Add ?theme=dark or ?theme=light to the end of any store address (or &theme=dark when the address already has a question mark) to see that page in one mode without saving anything.
The home page in dark mode on a phone

Dark mode on a phone: the monitor sits alone in the utility bar

Tips for picking dark colors.
  • Start from a near-black page, such as the default #0B0D0F, rather than pure black, and make Dark mode: cards and panels one step lighter (#13161A) so cards stand off the page.
  • Use an off-white text (#E8EBED) and a softer secondary text (#9AA2A9), and keep text at a contrast of at least 4.5 to 1 against both the background and the cards.
  • Lighten links, sale prices and errors for dark mode: the light-mode link green #3B6B0A and sale red #B42318 are too dark on near-black, which is why their dark partners are lime and #FF7B6E.
  • Keep Dark mode: lines subtle (#262B31): they should separate, not draw boxes.
  • A bright accent such as lime can stay the same in both modes; check Text on accent in each.
  • Keep Stage lighter than the page in dark mode, as it is by default, so the dark bands still read as a stage.
  • Background gradient is used in light mode only.
The checkout and Shopify’s customer account pages are not part of the theme. They keep their own colors, set in the Shopify admin. On phones, the browser’s address bar takes the Bench background, light or dark following the device setting.

​
In the theme editor

Color settings

Default color mode, the monitor switch and the color schemes: 1 Theme settings · 2 Colors

Logo settings

The logo for dark mode: 1 Theme settings · 2 Logo