Widget & Storefront

Smart theme color matching

Auto-detect your theme's accent and surface colors so the widget blends in.

1 min read164 words

RecurX's smart theme detector reads your active theme's CSS variables (--color-button, --color-button-text, surface bg) and proposes a palette that passes WCAG AA contrast.

How it works

  1. Known themes shortcut — Dawn ≥ 12, Sense, Refresh, Origin: RecurX uses canonical palettes baked in. No CSS reads.
  2. Generic detection — for unknown themes, RecurX inspects the live storefront DOM in a hidden iframe and probes accent / surface vars.
  3. WCAG validation — every candidate is checked against background contrast at 4.5:1. Failed candidates are dropped, never applied.

Use it

In Widget editor, click Match my theme. RecurX populates the color pickers. Tweak any field manually if you want to override.

Why a candidate may be rejected

  • Low contrast against card background.
  • Theme uses very light brand color on a white surface — WCAG can't pass 4.5:1, so RecurX falls back to a darker neutral.
  • Heavily customized themes that don't expose standard CSS vars — manual entry required.

Related articles

Was this article helpful?

Reach our team via the chat in the bottom-right corner — we usually reply within an hour.

Email support