Colors and dark mode
Recolor the whole store with one of 31 palettes, or build your own six color schemes. Let shoppers switch to a dark palette and remember their choice.
Index colors work on two levels. Color schemes are sets of colors (background, text, buttons, accents) that every section picks from. A color palette fills all six schemes at once, so you can recolor the store in one step. All settings are in Theme settings › Colors.
Color palettes
Theme settings › Colors › Color palette recolors the whole store. Each palette is shown in the list with three colored squares and sets all six color schemes, plus the sale, success and error colors. Every palette passes WCAG contrast checks in every scheme.
| Group | Palettes | Character |
|---|---|---|
| Calm and light | Index, Linen, Sand, Forest, Mint, Ocean, Cobalt, Lavender, Blush, Coral, Sunshine, Graphite | A light page with color in buttons, bands and accents. |
| Dark | Midnight, Pine, Navy, Espresso, Noir, Ultraviolet, Electric, Grape, Cyber | A dark page with light text; the last four with richer, deeper colors. |
| Colorful | Acid, Bubblegum, Tangerine, Tropical, Lemonade, Flamingo, Sunset, Pistachio, Retro, Cherry | A softly tinted page with their color in the buttons, one band and the promos. |
The presets start with these palettes: Index uses Custom (the Index colors), Poster uses Coral and Petal uses Sand.
The palette guide in the editor
The color scheme thumbnails in section settings always show the Custom colors, even when a palette is selected. To see what each scheme really looks like, Index shows a small guide in the bottom left corner of the editor preview with the palette's six schemes, numbered like the thumbnails. Shoppers never see it; turn it off with Show the palette guide in the editor.
Color schemes
Choose Custom in Color palette to edit the six schemes. Each scheme has a role in the default design:
| Scheme | Role | Used by default for |
|---|---|---|
| Scheme 1 | Page | The page background and most sections. |
| Scheme 2 | Alternate band | The footer, featured product and image banner content. |
| Scheme 3 | Strong band | The countdown and other sections that should stand out. |
| Scheme 4 | Inverse band | Dark bands such as the marquee. |
| Scheme 5 | Soft band | The newsletter card and the promo tile in the product grid. |
| Scheme 6 | Promo band | Not used by default – pick it for a promotion or a band you want to stand out. |
Every scheme has the same colors:
- Base: Background, Background gradient (optional; replaces the background), Text, Headings, Lines and outlines, Image backgrounds and inputs, Text on inputs.
- Buttons: Primary button, Primary button label, Secondary button, Secondary button label.
- Accents: Accent (hover states, focus rings, active filters), Text on accent, Highlight (soft backgrounds such as active chips and search highlights) and Text on highlight.
Each section has a Color scheme setting; some also have a separate scheme for cards, dropdowns, drawers or panels.
Status colors
Sale tag, Sale tag text and Sale price color the sale tag on product cards and the reduced price. Success and Error color messages such as "Added to cart" or a discount code that does not apply. Palettes set these too.
Dark mode for shoppers
With Let shoppers switch to dark mode on, shoppers get a sun and moon switch in the header and in the mobile menu. Their choice is remembered on their device.
- Dark palette: the palette used in dark mode – Midnight, Pine, Navy, Espresso, Noir, Ultraviolet, Electric, Grape or Cyber. The presets start with Pine (Index), Noir (Poster) and Espresso (Petal).
- Mode on first visit: Light, Dark, or Follow the shopper's device, which uses the light or dark setting of the shopper's phone or computer until they choose for themselves.
- Show or hide the switch in the header with Show light and dark mode switch in the Header section.
- If your logo is dark, upload a light version in Theme settings › Logo and favicon › Logo in dark mode.
All color settings
Theme settings: Colors10 settings
| Setting | Options | Default |
|---|---|---|
| Color paletteRecolors the whole store in one step. Choose Custom to use and edit the color schemes below; with a palette selected, scheme edits are not shown. | Custom (color schemes below) · ⬜⬛🟩 Index (white, ink, green) · ⬜🟫🟧 Linen (warm cream, terracotta) · ⬜🟫🟩 Sand (beige, walnut) · ⬜🟩🟨 Forest (sage, deep green) · ⬜🟩🟧 Mint (fresh green) · ⬜🟦🟧 Ocean (navy, bright blue) · ⬜🟦🟨 Cobalt (electric blue, yellow) · ⬜🟪🟩 Lavender (lilac, violet) · ⬜🟥🟪 Blush (soft pink, berry) · ⬜🟥🟩 Coral (white, red coral) · ⬜🟨🟦 Sunshine (cream, yellow) · ⬜⬜⬛ Graphite (grayscale) · ⬛🟦🟪 Midnight (dark, periwinkle) · ⬛🟩🟫 Pine (dark green, mint) · ⬛🟦🟨 Navy (dark blue, sky) · ⬛🟫🟧 Espresso (dark, caramel) · ⬛⬜🟥 Noir (black and white) · 🟨⬛🟪 Acid (soft lime, ink, magenta) · 🟪🟥🟦 Bubblegum (blush pink, berry, aqua) · 🟧⬛🟦 Tangerine (apricot, orange, periwinkle) · 🟩🟧🟨 Tropical (sea glass, teal, sun) · 🟨🟥🟪 Lemonade (butter, raspberry, lilac) · 🟪🟫🟩 Flamingo (petal pink, wine, mint) · 🟧🟥🟪 Sunset (peach, rust, plum) · 🟩🟪🟥 Pistachio (soft green, raspberry) · 🟨🟧🟦 Retro (cream, burnt orange, teal) · 🟥⬜🟨 Cherry (white, cherry red, butter) · 🟪🟨🟦 Ultraviolet (deep violet, lilac, gold) · 🟦🟨🟥 Electric (deep blue, yellow, pink) · 🟪🟩🟥 Grape (plum, lime, rose) · ⬛🟩🟪 Cyber (charcoal, mint, orchid) | Custom (color schemes below) |
| Show the palette guide in the editorThe color scheme thumbnails in section settings show the Custom colors. With a palette selected, a guide in the editor preview shows each scheme's real colors. Shoppers never see it. | Checkbox | On |
| Dark mode | ||
| Let shoppers switch to dark mode | Checkbox | On |
| Dark palette | ⬛🟦🟪 Midnight (dark, periwinkle) · ⬛🟩🟫 Pine (dark green, mint) · ⬛🟦🟨 Navy (dark blue, sky) · ⬛🟫🟧 Espresso (dark, caramel) · ⬛⬜🟥 Noir (black and white) · 🟪🟨🟦 Ultraviolet (deep violet, lilac, gold) · 🟦🟨🟥 Electric (deep blue, yellow, pink) · 🟪🟩🟥 Grape (plum, lime, rose) · ⬛🟩🟪 Cyber (charcoal, mint, orchid) | ⬛🟩🟫 Pine (dark green, mint) |
| Mode on first visit | Light · Dark · Follow the shopper's device | Light |
| Status colors | ||
| Sale tag | Color | #F6CFC8 |
| Sale tag text | Color | #161616 |
| Sale price | Color | #B4382A |
| Success | Color | #0F5C45 |
| Error | Color | #B4382A |