Theme Editor - Colors - TWICE Commerce

Colors settings panel in the theme editor — Theme Editor > Colors

The Colors panel defines the colour palette applied across every page of your storefront. Changes propagate globally — updating a colour here updates every element that references it. Each colour accepts a hex value (e.g. #111826). Click the swatch to open the colour picker, or type a hex code directly.

Background

Setting	Default	Description
Primary	`#FFFFFF`	Main page background.
Secondary	`#F7F9FA`	Alternate surface areas such as cards and side panels.
Contrast	`#111826`	High-contrast surfaces like the header or dark sections.

Text

Setting	Default	Description
Primary	`#111826`	Headings and primary body text.
Secondary	`#374152`	Supporting text, labels, and descriptions.
Contrast	`#FFFFFF`	Text on contrast-coloured backgrounds.

Border

Setting	Default	Description
Primary	`#E4E6EB`	Dividers, card borders, and section separators.
Secondary	`#F2F3F5`	Subtle separators and secondary dividers.

Checkboxes and radio buttons

Setting	Default	Description
Color	`#374152`	Default (unselected) colour for checkboxes and radio buttons.
Selected color	`#111826`	Colour when a checkbox or radio button is selected.

Status

Setting	Default	Description
Error	`#D92D20`	Validation errors, out-of-stock indicators, and other error states.

CSS variables

Every colour maps to a CSS variable you can reference in Custom CSS:

:root {
  --storefront-color-background: #FFFFFF;
  --storefront-color-background-secondary: #F7F9FA;
  --storefront-color-background-contrast: #111826;
  --storefront-color-text: #111826;
  --storefront-color-text-secondary: #374152;
  --storefront-color-text-contrast: #FFFFFF;
  --storefront-color-border: #E4E6EB;
  --storefront-color-border-secondary: #F2F3F5;
  --storefront-selection-control-color: #374152;
  --storefront-selection-control-selected-color: #111826;
  --storefront-color-error: #D92D20;
}

Header bar

Customize header background, text, icon, and border colours.

Typography

Configure font families and sizing.

Custom CSS

Override any style with custom CSS.

Welcome to TWICE Docs

Navigating in TWICE

Understand the system

Theme Editor - Colors

Background

Text

Border

Checkboxes and radio buttons

Status

CSS variables

Header bar

Typography

Custom CSS

​Background

​Text

​Border

​Checkboxes and radio buttons

​Status

​CSS variables

​Related

Header bar

Typography

Custom CSS

Background

Text

Border

Checkboxes and radio buttons

Status

CSS variables

Related