Theme mode
Controls the light/dark mode switcher behavior and appearance, letting your customers choose how they view your store.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Theme mode
Settings
General
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Enable theme mode** | Turns the light/dark mode switcher on or off across your store | Checked / Unchecked | Checked |
| **Select mode** | Decides whether customers switch modes manually or the store follows their device preference | Manual, Use device settings | Manual |
| **Default mode** | Sets which color mode your store loads in by default | Light, Dark | Light |
| **Position (desktop)** | Controls where the switcher appears on desktop screens | Header, Sticky on screen | Sticky on screen |
| **Position (mobile)** | Controls where the switcher appears on mobile screens | Header, Mobile menu drawer, Sticky on screen | Sticky on screen |
Appearance
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Switcher style** | Changes the shape of the switcher toggle | Pill, Circle, Rounded | Pill |
| **Switcher size** | Adjusts how large the switcher appears | Small, Medium, Large | Medium |
| **Show label** | Shows the light/dark label next to the switcher icon | Checked / Unchecked | Unchecked |
| **Switcher background (light)** | Sets the background color of the switcher when the store is in light mode | Any color | #1a1a1a |
| **Switcher icon (light)** | Sets the icon color of the switcher when the store is in light mode | Any color | #ffffff |
| **Switcher background (dark)** | Sets the background color of the switcher when the store is in dark mode | Any color | #f5f5f5 |
| **Switcher icon (dark)** | Sets the icon color of the switcher when the store is in dark mode | Any color | #1a1a1a |
| **Show shadow** | Adds a subtle drop shadow behind the switcher to help it stand out from the page | Checked / Unchecked | Checked |
| **Sticky corner** | Determines which bottom corner of the screen the switcher sits in (only applies when position is set to sticky on screen) | Left, Right | Right |
Tips / Best practices
- If most of your customers browse on mobile, consider placing the switcher in the header or mobile menu drawer so it does not overlap product images.
- Choose switcher colors that contrast well against both your light and dark backgrounds so the toggle is always easy to find.
- The "Use device settings" mode is convenient for customers, but "Manual" gives visitors an obvious way to switch, which can highlight that your store supports both modes.