AI Search Theming
Log in to add to favouritesPage last updated 05 October 2026
AI Search is styled with CSS custom properties (--insytful-*). Set a few of them to match your brand, with no build step needed. For anything the tokens don't cover, you can write ordinary CSS against the components' class names.
Applying your theme
Always set tokens on .insytful-theme, not :root.
Web Component
Put your CSS in the theme attribute:
<insytful-search
theme="
.insytful-theme {
--insytful-brand-primary: #6d28d9;
--insytful-btn-icon-search-bg-default: #6d28d9;
--insytful-modal-radius: 12px;
}
"
…
>React
Set tokens in your own stylesheet:
.insytful-theme {
--insytful-brand-primary: #6d28d9;
--insytful-btn-icon-search-bg-default: #6d28d9;
--insytful-modal-radius: 12px;
}The search dialog renders in a Shadow DOM, which your stylesheet can't reach. To style the dialog, pass the CSS to <Theme> as well:
<Theme css={`
.insytful-theme {
--insytful-brand-primary: #6d28d9;
}
`}>Search.Overview is part of your page, so your stylesheet styles it directly.
Only pass CSS your team has written to theme or <Theme css>. It isn't sanitised, so never build it from user input or CMS content.
Common customisations
| Change | Set |
|---|---|
| Brand colour | --insytful-brand-primary, --insytful-btn-icon-search-bg-default, --insytful-btn-icon-search-bg-hover, --insytful-semantic-focus-ring |
| Font | --insytful-font-family, --insytful-base-font-size |
| Dialog shape | --insytful-modal-max-width, --insytful-modal-radius, --insytful-modal-bg |
| Suggestion chips | --insytful-btn-prompt-bg-default, --insytful-btn-prompt-bg-hover, --insytful-btn-prompt-radius |
| Quick-action buttons | --insytful-cta-radius, --insytful-cta-primary-bg-default, --insytful-cta-primary-text |
| Error message | --insytful-callout-error-bg, --insytful-callout-error-border |
| Stacking order | --insytful-z-index (default 999; change it only if something on your page covers the dialog) |
There are around 70 tokens in total. See the full token reference for every token and its default.
Two tokens that do a lot
--insytful-semantic-focus-ringsets the focus outline colour for every input, button, link and chip.--insytful-base-font-sizescales all answer text (headings, paragraphs, lists and code) in proportion. It defaults to1rem, so it respects visitors' browser text-size settings. If your site setshtml { font-size: 62.5% }, set this to16px.
Beyond tokens
Every component has insytful-search-* class names and data-* attributes that show its state. Write CSS against them for anything a token doesn't cover:
.insytful-search-suggestions-item-btn {
text-transform: uppercase;
}
.insytful-search-cta-btn[data-intent="primary"] {
font-weight: 700;
}You don't need !important. Your rule just has to:
- target the class name (a bare element selector like
buttonisn't enough), and - load after the package's stylesheet. For React, import your CSS after insytful-ai-search-components/style.css. CSS in
themeor<Theme css>is always applied after the defaults.
The full reference lists the class names and data-* attributes.
Styling from scratch (React)
Leave out <Theme> and the components render with no styles, only their class names and data-* attributes. For the dialog, also set <InsytfulSearch.Portal isolation="none"> so your stylesheet can reach it.