Tests three theme policies that control how the side panel widget determines its light/dark appearance relative to the host page.
The embed script supports three theme policies for the widget iframe:
| Policy | Behavior | Use Case |
|---|---|---|
match_host |
Widget follows the host page theme. Detects <html> class changes via MutationObserver. |
Default — seamless integration with host site's theme system. |
force_light |
Widget always renders in light theme, regardless of host page. | Brand-mandated light chat UI on dark host sites. |
force_dark |
Widget always renders in dark theme, regardless of host page. | Dark-branded chat experience regardless of host context. |
The match_host policy works by observing the class attribute on <html>. When the class changes between "dark" and "light", the embed script posts a theme message to the widget iframe.
For force_light and force_dark, the embed script ignores host class changes and always sends the fixed theme to the iframe on initialization.
Theme transitions should be smooth — the widget should use CSS transitions to animate color changes rather than causing a jarring flash of content.
Try these additional scenarios to verify theme behavior:
1. Rapid toggling: Switch between light and dark host themes quickly several times. The widget should keep up without losing sync or showing a flash.
2. Policy switch while open: Change the theme policy while the panel is open. The widget should immediately update to reflect the new policy.
3. System preference change: If your OS supports it, toggle the system dark mode. The host page should respond, and with match_host, the widget should follow.
↓ Keep scrolling ↓
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.