---
title: Colors
url: https://support.troopthemes.com/guide/beyond/colors/
theme: Beyond
theme_styles: Fleur
---

# Colors in Beyond

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

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

Three accents plus page, text, light, and dark. Story sections and product labels share this list.

## Theme settings (Beyond)

### Accents (Beyond)

**Accent 1**, **Accent 2**, and **Accent 3**. Use them for section backgrounds, labels, and the occasional Brand statement field.

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

- **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 lines on About us and Text menu when **Show block borders** is on
- **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

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). Many story layouts look cleaner with shadows off; raise border opacity if the page needs more structure.

About us and Text menu can show **block borders**. Border opacity is how strong those lines appear, separate from the shadow toggle.

Alternating section backgrounds in a 1–2–1–2 pattern creates rhythm, for example page → accent → page → accent, or page → light → page. On a story homepage you might instead keep most sections on the page color and use one accent only behind Brand statement so that block is the pause.

## On each section (Beyond)

**Text color** is Auto, Light, or Dark. **Background color** can be page, light, dark, or an accent. Auto is correct until type sits on a photo.

The section's **Image darkness** setting, together with **Theme settings** → **Typography** → **Image darkness**, improves the contrast of overlay headings on banners. About us media blocks use the section text color for accompanying copy.

![Section text and background color](https://support.troopthemes.com/_images/beyond/alignment--section-settings.jpg)

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


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

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

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 an editorial, story-led jewelry 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/beyond/sidekick--theme-editor.png)

## Troubleshooting (Beyond)

- **Brand statement didn’t pick up the new accent**: open the section and set **Background color**. Theme settings only define the list.
- **Borders on About us look too strong**: lower **Border opacity**, or turn off **Show block borders** on that section.
- **Buttons didn’t change**: [Buttons and inputs](https://support.troopthemes.com/guide/beyond/buttons-and-inputs/).
- **Checkout is unchanged**: Shopify checkout, not the theme.