# 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.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/colors/

Tally 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 | Tally, 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: **Tally** uses Custom (the Tally colors), **Poster** uses Coral and **Petal** uses Sand.

> **Note:** Palettes override the color schemes
>
> While a palette is selected, edits to the color schemes are not shown in the store. Choose **Custom (color schemes below)** to use and edit the color schemes yourself.

### 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, Tally 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.

> **Tip:** Keep text readable
>
> Check that text and button labels have enough contrast with their background: at least 4.5:1 for normal text. Tally's own palettes already pass. A quick way to check your own colors is a contrast checker such as the one in your browser's developer tools.

### 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 (Tally), 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](https://themelab.page/tally/docs/header-and-footer.md#header).
- If your logo is dark, upload a light version in **Theme settings › Logo and favicon › Logo in dark mode**.

> **Note**
>
> Product photos are not changed in dark mode. Photos on a white background look best with **Show image background** on in **Theme settings › Product cards**, so they sit on a soft tile instead of directly on the dark page.

## All color settings

**Theme settings: Colors** (10 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Color palette** – Recolors 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) · ⬜⬛🟩 Tally (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 editor** – The 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*

| Setting | Options | Default |
| --- | --- | --- |
| **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*

| Setting | Options | Default |
| --- | --- | --- |
| **Sale tag** | Color | #F6CFC8 |
| **Sale tag text** | Color | #161616 |
| **Sale price** | Color | #B4382A |
| **Success** | Color | #0F5C45 |
| **Error** | Color | #B4382A |