Colors: palette and color roles

Propel's colors are set in one place: Online Store > Themes > Customize > Theme settings > Appearance. You set a small palette of brand colors, and a set of color roles decides where each color appears on the storefront.

How colors work in Propel

There are two layers:

The color palette. Nine brand colors: five for light mode and four for dark mode.
Color roles. Named jobs, such as Background, Accent or Selected. Each role uses a palette color by default.

Change a palette color to update every role that uses it. To give one role a different color, set that role to its own color instead.

Muted text, borders and tints are not separate settings. Propel mixes them from your Text and Background colors, so they stay in step when you change either one.

The color palette

The palette sits at the top of Appearance. Its default colors are:

Palette color	Default	Used by default for
paper	#F7F7F3	Light mode Background
surface	#FFFFFF	Light mode Card background and the light text roles; also Text on contrast band in dark mode
text	#17191B	Light mode Text
ink	#121416	Light mode Contrast band and Selected
signal	#E63946	Accent, in light and dark mode
dark_paper	#151719	Dark mode Background
dark_surface	#1C1F21	Dark mode Card background
dark_text	#F1F1ED	Dark mode Text and Selected
dark_ink	#0D0F10	Dark mode Contrast band, Text on accent and Text on selected

Presentation mode

Presentation mode sets the default for new visitors:

System follows the visitor's device setting.
Light always starts in light mode.
Dark always starts in dark mode.

Visitors can also pick a mode themselves in the header (on phones, in the menu). Their choice is remembered on their device and overrides this setting. Because of that, a change to Presentation mode may not show in a browser where you have already picked a mode. To preview it, use a private browser window.

Light mode colors

Role	Default palette color	Where it shows
Background	paper	Page background.
Card background	surface	Cards, panels, drawers and dialogs.
Text	text	Headings and body text.
Accent	signal	Highlights and links, and the one signal moment on each screen.
Text on accent	surface	Text on filled sale badges, when Theme settings > Product display > Sale badge style is Filled.
Contrast band	ink	Dark bands, messages and primary buttons.
Text on contrast band	surface	Text and icons on Contrast band and over images.
Selected	ink	Selected sizes, filters and options.
Text on selected	surface	Text on Selected.

Dark mode colors

Dark mode has the same nine roles, with their own defaults.

Role	Default palette color	Where it shows
Background	dark_paper	Page background.
Card background	dark_surface	Cards, panels, drawers and dialogs.
Text	dark_text	Headings and body text. Primary buttons in dark mode are filled with this color, with Contrast band as their text.
Accent	signal	Highlights and links, and the one signal moment on each screen.
Text on accent	dark_ink	Text on filled sale badges.
Contrast band	dark_ink	Dark bands and messages.
Text on contrast band	surface	Text and icons on Contrast band and over images.
Selected	dark_text	Selected sizes, filters and options.
Text on selected	dark_ink	Text on Selected.

Keep text readable

Several roles come in pairs: a fill color and the text that sits on it. When you change either color in a pair, keep a contrast of at least 4.5:1 between them, as the setting help in the editor asks:

Accent and Text on accent
Contrast band and Text on contrast band
Selected and Text on selected

Check light mode and dark mode separately, because each has its own roles.

Announcement bar colors

The Announcement bar has its own Background color and Text color settings. Leave both empty to follow the theme in light and dark mode. A custom background color stays the same in dark mode.

Theme settings
Product badges, for Sale badge style