Colors theme settings
The Colors theme settings set Highlight's three store colors: the accent color, the text color and the background color.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
Highlight uses three colors for the whole store: an accent color, a text color and a background color. Highlight has no color schemes; a few sections and blocks have their own color settings.
Where to find it: Theme settings → Colors
Customizing the colors
- Accent color is used for hover effects, buttons, icons and highlighted links.
- Text color is used for most of your store's text, and for borders and lines in a lighter shade.
- Background color is the background of every page, the drawers and the popups that have no color of their own.
Highlight works out a readable text color on top of the accent color by itself, for example for the text of solid buttons.
Why are there so few color options in Highlight?
Because Highlight is designed in a single color, with the emphasis on the content and the way it is laid out. Its asymmetrical elements need a clean layout to stand out. That is why the header, the menu drawer and the cart drawer have no color settings of their own; they use the three store colors.
Can I change the color of one section?
Yes, for the sections and blocks that have their own color settings:
- Announcement bar section: Background color, Text color and Border.
- Footer group: Footer → Custom colors.
- Popups section: each popup has its own colors.
- Image with hotspots, Images with text overlay, Video: background, Scrolling text and Image comparison: their own text or overlay colors. See Sections.
- The Card and Text card of the Flex cards and Flex grid sections, and the Caption block.
Other sections use the store colors. Highlight does not support a different background color per section otherwise. To get one, use a Flex cards or Flex grid section, or ask a developer for custom CSS (see Custom CSS and code).
All Colors settings
Every setting, with its type and default.
Accent color (color, default: #3f14e1): Sets the color of hover effects, buttons, icons and highlighted links. Text on accent-colored buttons turns black or white automatically, for contrast.
Text color (color, default: #000000): Sets the color of most text in the store, and of borders and lines in a lighter shade.
Background color (color, default: #ffffff): Sets the background color of every page and of the drawers.
Related pages
- Layout theme settings: the spacing part of the old Colors & layout article.
- Highlight presets: the three colors of each preset.
- What Highlight does not do: limits.