Feature
Match my website — automatic widget theming
An embedded reviews grid that looks bolted on gets ignored. Match my website reads the page the widget will live on and themes every card, star, tab and button to the colours your site already uses — in one click, and fully editable afterwards.
Last reviewed by the Reviews Widget product team.
How it works
Paste the URL of the page that will host the embed. We fetch it, parse its stylesheets and custom properties, decide which colour plays which role, and write those values into the widget's colour tokens. Nothing is locked in — every token stays editable.
- Open your grid's settings and choose Match my website in the theme section.
- Paste the URL of the page the widget will appear on — the more representative the page, the better the match.
- The extractor follows the page's stylesheets, including
@importchains, and collects declared colours in whatever notation they use: hex, rgb, hsl or oklch. - Roles are assigned — page background, card surface, body text, heading, border, muted text and accent — and the widget preview updates immediately.
- Adjust anything you want by hand, then save. Autosave keeps the rest of your settings untouched.
What gets matched
| Site role | Widget token | Notes |
|---|---|---|
| Page background | Widget background | The area behind the review cards |
| Card / panel surface | Card background | Kept visually distinct from the widget background |
| Body text | Review text colour | Checked for contrast against the card surface |
| Heading text | Header title colour | Applies to the widget title and rating score |
| Border / divider | Card border colour | Border width and radius follow your site's rounding |
| Brand / link accent | Accent colour | Drives buttons, tabs and links (stars can override separately) |
| Font stack | Widget font | Falls back to a system stack when unavailable |
Light sites, dark sites and everything between
Naive extractors pick the first big colour they find, which is why a light website with a dark navigation bar so often ends up with a black widget. Ours weighs polarity by the visual area each colour covers, so headers, footers and hero overlays don't outvote the page itself. Rules inside prefers-color-scheme: dark blocks are stripped before extraction, and surfaces are separated after the fact so cards never disappear into the background.
Readability is enforced, not assumed
Text and surface pairings are checked before they're applied, and adjusted when a combination would fall below a comfortable contrast ratio. A brand colour that works as a button fill but not as body text is used for buttons only. You still get a widget that matches — just one people can actually read.
You stay in control
Match my website is a starting point, not a lock-in. Every colour, radius, border width, shadow and font remains editable in the settings sidebar, and you can jump to any of the built-in design presets at any time. Re-run the match after a site redesign and the widget follows along.
Sources & further reading
- W3C — CSS Color Module Level 4 — colour spaces used when mapping extracted values
- WebAIM — Contrast checker — the contrast floor applied to generated themes
- web.dev — prefers-color-scheme — how dark-mode blocks are detected and excluded