How do I change my store colours and light or dark mode?
Pick your store's primary and secondary colours, and set the colour mode: light, dark, or both with a switch for customers.
In this article
You can give your store your brand colours and choose a light or dark look without changing your theme.
Store colours
- Go to Store Settings → the Storefront design tab.
- In the Brand Colors card, set the Primary color and Secondary color: use the colour picker, a preset, or type the colour code.
- Click Save.
The primary colour is used for buttons, links and prices on your storefront.
Colour code: it must be in the form #RRGGBB (for example #2563EB). Any other format is not saved and no error is shown, so check the colour actually changed after saving.
Store colour not changing? Check whether you picked a different Accent color in the theme editor (under Global Design). Set it back to your store colour and click Save, and the store follows your Primary color again. Details in How do I change my store colours and logo?
Colour mode (light / dark)
In the same tab, the Color Mode card has three options:
| Option | Meaning |
|---|---|
| Light mode | Light background, dark text. |
| Dark mode | Dark background, light text. |
| Both modes | Customers toggle between the two with a button in the store. |
If Both modes shows a lock and Upgrade, your plan does not include it — both modes are on every plan now, so try reloading the page. If you pick it without the feature, your previous mode stays.
Colours for each mode
Background, card and text colours for each mode are set in the theme editor → Global Design → "Light Mode Colors" and "Dark Mode Colors". If your store is light only, changing the dark-mode colours won't be visible to shoppers.
Note: the moon button ("Toggle dark mode") in the theme editor only switches the preview so you can check your dark colours; it doesn't change your store setting.
When does the change appear?
As soon as you click Save, the change goes live on your store. Open your store with the My Store button and refresh the page to see it.
Want to change the whole look, not just the colours? That's done from the theme Marketplace and the theme customizer.
Was this article helpful?