Skip to main content

Dark/Light mode

This guide describes how to set up a dark mode for your store and give visitors a switch to toggle it.

Dark mode in Ronin works by mapping color schemes: each light scheme is paired with a dark scheme, and when a visitor turns dark mode on, every section that uses a light scheme switches to its dark partner. You therefore need at least one color scheme with a dark background and light text.

Check the dark color schemes​

  1. On your store's Shopify admin page, from the left-side menu, select Sales channels > Online store > Themes.
  2. In the Current theme section, select Customize to open the Theme editor.
  3. Select the Theme settings tab in the sidebar and open Colors.
  4. Check that you have at least one dark scheme (dark Background, light Text), or select Add scheme to create one. Note its name. Every Ronin preset ships with Scheme 1 (light) and two dark schemes, Scheme 2 and Scheme 3.

guide-dark-light-mode-4.webp

Map light schemes to dark schemes​

  1. Still in Theme settings, open Dark mode.
  2. In the Dark mode mapping field, enter one pair per line in the format Light scheme: Dark scheme. Press Enter to add another line.

guide-dark-light-mode-2.webp

All three presets ship with this mapping:

Scheme 1: Scheme 2
Scheme 3: Scheme 2

Read it as: sections that use Scheme 1 or Scheme 3 switch to Scheme 2 in dark mode. Several schemes can point to the same dark scheme, as here. If you add more schemes, add a line for each one, for example:

Scheme 1: Scheme 2
Scheme 3: Scheme 2
Scheme 4: Scheme 5
  1. Select Save.
note

Use the scheme names exactly as they appear in Theme settings > Colors. A scheme that is not listed in the mapping keeps its colors in dark mode.

Add the Dark mode switch​

Visitors toggle dark mode with the Dark mode block of the Floating sidebar section. The section ships with a Dark mode block already added.

  1. In the Theme editor sidebar, scroll to the Features group at the bottom of the section list.
  2. If Floating sidebar is not there, select Add section and choose Floating sidebar.
  3. Select the section. If it has no Dark mode block, select Add block > Dark mode. You can adjust the block's Icon size, Color, Color opacity and Custom color.
  4. In the section settings, choose the Placement of the sidebar (Top, Middle or Bottom, left or right) and whether it is Hidden on scroll down or Hidden on mobile.
  5. Select Save.

guide-dark-light-mode-sidebar-3.webp

The Floating sidebar is a section group, so the switch appears on every page. The same section also holds the Back to top and Comparison blocks.

tip

Preview your homepage, product page and cart with dark mode on. Images, badges and buttons that look fine on a light background may need a different scheme, and you can pair any section with its own dark partner by giving it its own light scheme and adding a line to the mapping.