Skip to content
Docs

Turn on dark mode

Reign Theme overviewPremiumGet Reign Theme →

Turn on dark mode

Section titled “Turn on dark mode”

You will end up with a small sun and moon button that lets visitors switch between a light and a dark version of your site. The site remembers their choice when they come back. Dark mode follows your colour palette, so you do not have to pick dark colours by hand.

Before you start

Section titled “Before you start”
  • Pick your colour palette first, under Appearance > Customize > Color Options > Color Palette. Dark mode is built from it. A palette named Rose gives a dark rose, and Emerald gives a dark emerald.
  • Set your main logo under Appearance > Customize > Site Identity.
  • If you want a dark-background version of your logo, have the file ready.

Steps

Section titled “Steps”

  1. Go to Appearance > Customize > Color Options > Light & Dark Mode.

  2. Switch Show Light / Dark Switch on. It is on by default in Reign, but check it.

  3. Choose Switch Position:

    • Header and mobile menu
    • Header only
    • Mobile menu only

    This setting only appears when the switch is on.

  4. Set Default Mode to Light or Dark. This is what a first-time visitor sees before they choose.

  5. Upload a Dark Mode Logo if your normal logo disappears on a dark header. It is shown only in dark mode.

  6. To place the switch among your other header icons, go to Appearance > Customize > Header > Layout > Header Icons Options and drag Light / Dark Toggle where you want it. For phones, use Header > Mobile Menu > Mobile Header Icons Options.

  7. Select Publish.

You do not need to touch Color Options > Dark Mode Colors unless one colour still looks wrong after you check both modes.

Check it worked

Section titled “Check it worked”
  1. Open your site in a private (incognito) window. You should see your Default Mode.
  2. Select the sun and moon button. The whole site should change, and stay changed when you reload.
  3. Check a page with a large photo at the top, and a page with a form. These are where a leftover custom colour is most likely to look wrong in one mode.
  4. Check the logo in both modes.
  5. If you use pictures that must change between modes, open Reign Settings > Design and use the Dark mode images card to pair a light image with a dark one.

If something looks wrong

Section titled “If something looks wrong”
  • No button appears. Check Show Light / Dark Switch is on, and that Switch Position includes the screen size you are testing.
  • The logo vanishes in dark mode. Add a Dark Mode Logo.
  • One area stays light. A colour set by hand under Color Options > Individual Colors can win over the palette. Open Dark Mode Colors and fix that colour for dark mode.
Section titled “Related”