Matching your theme

Because every colour and measurement is editable (see Colours and Shape and type), the bar can be made to look like it was built into your theme, rather than dropped on top of it. This page is a starting approach, not a rule.

Start from your theme's own values

Most themes use a consistent set of colours for buttons, badges or tags elsewhere on the site. Matching those, your theme's button background for the selected state and its border colour for resting tags, usually reads as more "native" than picking a new palette from scratch.

Use the preview honestly

The Design page's preview includes a page-background switcher (Light, Warm, Dark) so you can check the bar against something closer to your theme's actual background than the app's own admin surface. If your storefront uses an off-white or dark background, checking contrast there, not just against pure white, catches problems before they reach real readers.

Radius and spacing carry more of the "match" than colour

Two bars in your exact brand colours can still look mismatched if one uses sharp corners and tight spacing while your theme's buttons are soft and generous, or the reverse. If nothing else, matching corner radius (see Shape and type) to your theme's buttons is often the single change that makes the biggest difference.