---
title: Colors
url: https://support.troopthemes.com/guide/emerge/colors/
theme: Emerge
theme_styles: Cafe, Elements
---

# Colors in Emerge

**Edit theme** → **Theme settings** → **Colors**

![Emerge Colors in Theme settings](https://support.troopthemes.com/_images/emerge/colors--settings.jpg)

Three accents plus page, text, light, and dark. Shape colors on sections pull from the same list.

## Theme settings (Emerge)

### Accents (Emerge)

**Accent 1**, **Accent 2**, and **Accent 3** appear in section background pickers and in [shape color](https://support.troopthemes.com/guide/emerge/section-shapes/).

Set them to colors you are willing to see as a large field, not only as a button. A neon accent that works as a 4px highlight may fail as a full-width wave.

![Accent used on a section](https://support.troopthemes.com/_images/emerge/shapes--storefront.jpg)

### Page, text, light, dark, borders, shadows (Emerge)

- **Page background** / **Text**: default canvas and copy
- **Light background** / **Dark background**: Light and Dark in section pickers
- **Alert**: errors and warnings
- **Border opacity**: strength of hairline borders
- **Enable drop shadows**: on or off storewide

When **Enable drop shadows** is on, shadows appear on:

- The sticky header
- Navigation dropdowns and megamenus
- Drawers (cart, search, mobile menu, filters, and similar panels)
- Popups and the newsletter signup
- Sticky bars (product add-to-cart, quick add, cart checkout, collection filters)
- Quantity buttons on the product form
- Shop the Look cards and Shop the Banner hotspots
- Layered images in Overlapping media
- The main page wrapper when the footer overlaps content

When shadows are off, the theme usually draws a **border** in their place instead, controlled by **Border opacity**. A few elements only lose the shadow (slideshow arrows, pagination on hover, country/region dropdowns). Turn shadows off for a flatter Cafe-like surface, then raise border opacity if you want quiet lines without using a shape.

Alternating section backgrounds in a 1–2–1–2 pattern creates rhythm, for example page → accent → page → accent, or page → light → page. You can also let the shape carry the accent while the section body stays on the page color.

## On each section (Emerge)

**Text color** is Auto, Light, or Dark. Auto is the default; Light or Dark when type sits on a photo or a strong accent. The section's **Image darkness** setting improves the contrast of overlay headings.

Shape color is separate from background color. A section can have a page-colored body and an Accent 1 bottom wave so the next section appears to rise through it.

> **A color that is not in Theme settings**
>
> See [custom CSS](https://support.troopthemes.com/guide/emerge/adding-css-editing-template-code/). Prefer accents so shapes and sections stay in family.


Button colors are in [Buttons and inputs](https://support.troopthemes.com/guide/emerge/buttons-and-inputs/). Checkout and apps are unchanged.

## Ask Sidekick <img src="/_images/sidekick-icon.png" alt="" class="sidekick-icon"> (Emerge)

Open [Sidekick](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick) from the theme editor toolbar (top right, next to the device preview icon), or press `⌘.` (`Ctrl+.` on Windows). Describe your brand or the mood you want and it'll suggest colors, previewed before anything is applied to Theme settings → Colors.

> "Suggest values for Accent 1, Accent 2, and Accent 3 for a laid-back, cafe-style clothing brand, plus a Page background and Text color that pair with them."

A fast way to get a starting palette, or a second opinion when you're stuck between two options, you still decide what to keep.

![Opening Sidekick from the theme editor toolbar](https://support.troopthemes.com/_images/emerge/sidekick--theme-editor.png)

## Troubleshooting (Emerge)

- **The wave is the wrong color**: open the section and set **Top/Bottom shape color**. That is not Theme settings → Colors, but it *picks from* this list.
- **One section ignored the palette**: that section has its own **Background color**.
- **Buttons didn’t change**: [Buttons and inputs](https://support.troopthemes.com/guide/emerge/buttons-and-inputs/).
- **Checkout is unchanged**: Shopify checkout, not the theme.