Chameleon Experiences can follow your product's light and dark modes. You can enable this on any Theme, and it will include two palettes, one Light and one Dark. You set the rule that decides which one a user sees, and from then on, every Experience using that Theme switches on its own.
🔐 Available for all plans
🧑💼 Admins & Designers can update
📍 Applies to Tours, Tooltips, Embeddables, Microsurveys, Launchers
⚙️ Find in the Dashboard → Product Context → Styling → Themes
How do Light and Dark modes work?
Turn on Dark/Light mode on any Theme to enable Light and Dark palettes. Set a switch rule: the condition Chameleon checks in your app to decide which palette to render to end-users.
Only colors differ between the two modes. Fonts, font sizes, line heights, spacing, corner radius, border widths, and background type are shared.
Turning on Light/Dark mode
Open a Theme from the Styling page and flip the Dark/Light mode toggle in the toolbar above the styling panel. Next:
Chameleon works out which palette you already have. It reads your Theme's canvas background color — a light background means the palette you've built is your Light one, a dark background means it's your Dark one.
It generates the opposite palette for you. Your brand hues are kept as-is; only lightness (and, for neutrals, saturation) is adjusted. Text and button color pairs are checked against their new backgrounds and adjusted until they clear the WCAG AA 4.5:1 contrast ratio, so the generated palette is legible from the start.
The Light/Dark theme configuration window opens, allowing you to set the switch rule.
After you confirm, the change is live immediately and applies to all Experiences using this Theme.
Adjusting each mode
With Dark/Light mode on, a ☀️ / 🌙 toggle appears in the Theme editor toolbar. Pick a palette to edit, and the styling panel and the live preview both follow it.
Change a color while ☀️ Light is selected and you're editing the Light palette.
Change the same color while 🌙 Dark is selected and you're editing the Dark palette.
Change a font, size, spacing, or radius in either mode, and both palettes reflect the change.
👉 Chameleon won't correct you if you put light colors in the Dark slot. The labels describe when a palette shows, not what it has to look like, so a deliberately inverted Theme renders exactly as you built it.
Choosing what triggers the switch
Open the switch rule any time from the ⚙️ gear icon in the Theme editor toolbar.
Base mode is the palette Chameleon shows by default, and the one it falls back to whenever the rule can't be evaluated. Set it to whichever mode most of your users are in. Your rule then describes the exception: when to switch to the other mode.
Detection method: Property
Switch based on a User Property you already send to Chameleon. Pick the property, pick a comparison, and enter the value. The comparisons available depend on the property's type:
Property type | Comparisons |
Text | is · is not · contains · does not contain · is set · is missing |
Number | is · is not · greater than · less than · is set · is missing |
True/false | is true · is false |
📌 Use this when your app already knows the user's preference and sends it to Chameleon. If you're not sending anything like it today, the CSS selector method below usually needs no setup at all.
Detection method: CSS selector
Switch based on something Chameleon can see on the page, typically the class or attribute your app already sets when dark mode is on. Common selectors include: html.dark, body.dark-mode, html[data-theme="dark"]. Check your app's markup with your browser's inspector to find yours.
ℹ This is also how you follow the user's operating system settings. Most products that support dark mode already respond to the OS preference by toggling a class or attribute on <html> or <body> — point the selector at it and Chameleon follows along
Preview the rule
At the bottom of the configuration window, Chameleon restates your rule as a plain sentence. Chameleon falls back to your base mode if:
the property isn't set on that user, or is empty
the CSS selector doesn't match anything on the page
the selector isn't valid CSS
Switching mid-session
The rule is re-checked live. If the user's property value changes, or the element your selector points at appears or disappears, any visible Experience flips to the other palette on the spot. No reload needed.
Building with a Light/Dark Theme
When you're editing an Experience that uses a Light/Dark Theme, a ☀️ / 🌙 toggle appears in the Builder's top bar. Change which palette you're looking at while you build; it never changes the Experience itself.
In Preview mode, Chameleon evaluates your real switch rule against the actual page and user, as it will for your end users.
ℹ If Preview shows Light when you expected Dark, that might be a mismatch on your rule, not necessarily a preview bug. Check the property value on the profile you're previewing, or confirm that the selector is actually on the page.
Detaching an Experience from the Theme
Making custom style changes to a single Experience detaches it from its Theme. With a Light/Dark Theme, Chameleon asks which palette it should keep.
ℹ A detached Experience locks to that one palette and stops switching for the viewer. Your Theme itself is untouched. If you want an Experience to keep following light and dark, style it through the Theme rather than overriding it in the Builder.
Turning off Light/Dark mode
Flip the Dark/Light mode toggle off, and Chameleon asks which palette should become the Theme's single active one: keep Light or Dark. The palette you don't keep isn't deleted. It's stored, and turning Dark/Light mode back on restores it exactly as you left it.
Using Copilot
Copilot can adjust or manage the Light/Dark modes for you. Try:
"Turn on light and dark mode for my Onboarding theme."
"Make the dark palette on this Theme warmer."
"Switch my Theme to dark mode when the user property
appearanceisnight."
Good to know
The two palettes live on the same Theme. You don't need a second Theme for dark mode, nor do you need to duplicate your Experiences.
Existing Experiences pick it up automatically. Turn on Dark/Light mode for a Theme, and every Experience already using it gains dark support on save.
Only colors are per-mode. If a change should apply to just one mode and it isn't a color, it can't be done through Custom CSS.
Test both modes. The fastest check is Preview in the Builder with the switch condition satisfied, and again without it.