AI Search Theming

Page last updated 28 July 2026

Insytful AI Search is styled entirely through CSS custom properties (--insytful-*). No build step, no CSS-in-JS — set them once and they cascade into the widget's Shadow DOM automatically.

How to apply

Web Component — set them on .insytful-root inside the theme attribute:

HTML

<insytful-search
  theme="
    .insytful-root {
      --insytful-brand-primary: #6d28d9;
      --insytful-btn-icon-search-bg-default: #6d28d9;
      --insytful-modal-radius: 12px;
    }
  "
  ...
>

React — set them on your theme file on .insytful-root (they pierce the Shadow DOM automatically):

JavaScript

.insytful-root {
  --insytful-brand-primary: #6d28d9;
  --insytful-btn-icon-search-bg-default: #6d28d9;
  --insytful-modal-radius: 12px;
}

Or pass a theme string directly to Root, the same way the Web Component does:

tsx

<InsytfulSearch.Root
  theme={`
    .insytful-root {
      --insytful-brand-primary: #6d28d9;
      --insytful-btn-icon-search-bg-default: #6d28d9;
      --insytful-modal-radius: 12px;
    }
  `}
  ...
>

What you'll typically customise


Goal	Variables
Match your brand color	`--insytful-brand-primary`, `--insytful-btn-icon-search-bg-default`, `--insytful-semantic-focus-ring`
Match your typeface	`--insytful-font-family`, `--insytful-base-font-size`
Reshape the dialog	`--insytful-modal-max-width`, `--insytful-modal-radius`, `--insytful-modal-bg`
Switch to a corner widget	`--insytful-widget-width`, `--insytful-widget-height`, `--insytful-widget-radius` (requires `variant="widget"`)
Restyle suggestion chips	`--insytful-btn-prompt-bg-default`, `--insytful-btn-prompt-bg-hover`, `--insytful-btn-prompt-radius`
Restyle the error state	`--insytful-callout-error-bg`, `--insytful-callout-error-border`, `--insytful-callout-error-cta-bg`

That covers most rebrand work. There are ~50 variables in total, grouped by component below — every token, its default, and what it controls.

Two things worth knowing

One focus-ring token governs the whole widget. Set --insytful-semantic-focus-ring once and every focusable element (input, buttons, links, chips) picks it up — no per-component focus styling needed.
--insytful-base-font-size scales all AI-response prose. Headings, paragraphs, lists, and code blocks are sized in em against this one variable, so overriding it rescales the whole response block proportionally.

For anything not covered by a variable, both platforms accept a raw theme CSS string injected into the Shadow DOM.

Full CSS variable reference

Every variable below ships with the default shown

Typography


Variable	Default	Notes
`--insytful-font-family`	`system-ui, -apple-system, sans-serif`	Base font stack for the whole widget
`--insytful-base-font-size`	`1rem`	Base size for AI-response prose

Text colors


Variable	Default	Notes
`--insytful-text-default`	`#333333`	Body text, headings
`--insytful-text-muted`	`#6c6c6c`	Secondary text
`--insytful-text-link-default`	`#1d70b8`	Links in AI response markdown
`--insytful-text-link-hover`	`#184b76`	Link hover state
`--insytful-typing-indicator-text`	`var(--insytful-text-muted)`	"Thinking…" indicator text
`--insytful-disclaimer-text`	`var(--insytful-text-muted)`	Disclaimer footer text

Brand


Variable	Default	Notes
`--insytful-brand-primary`	`#195491`	Blockquote accent border in AI responses

Modal surface


Variable	Default	Notes
`--insytful-modal-bg`	`#ffffff`	Dialog background
`--insytful-modal-max-width`	`784px`	Dialog max width
`--insytful-modal-radius`	`0px`	Dialog corner radius

Widget surface (`variant="widget"` only)


Variable	Default	Notes
`--insytful-widget-width`	`380px`	Panel width
`--insytful-widget-height`	`600px`	Panel height
`--insytful-widget-inset-bottom`	`24px`	Distance from bottom of viewport
`--insytful-widget-inset-right`	`24px`	Distance from right of viewport
`--insytful-widget-radius`	`16px`	Panel corner radius
`--insytful-widget-shadow`	`0px 12px 40px rgba(0, 0, 0, 0.16)`	Panel drop shadow

Suggestion chips


Variable	Default	Notes
`--insytful-btn-prompt-bg-default`	`#e2eefa`	Chip background
`--insytful-btn-prompt-bg-hover`	`#c8daec`	Chip hover background
`--insytful-btn-prompt-text`	`#333333`	Chip text
`--insytful-btn-prompt-radius`	`12px`	Chip corner radius
`--insytful-btn-prompt-focus`	`var(--insytful-semantic-focus-ring)`	Chip focus ring color

Input card


Variable	Default	Notes
`--insytful-input-card-bg`	`#ffffff`	Input card background
`--insytful-input-card-radius`	`16px`	Input card corner radius
`--insytful-input-card-border`	`var(--insytful-semantic-search-field-stroke)`	Input card border color
`--insytful-input-card-border-width`	`1px`	Input card border width

Send button


Variable	Default	Notes
`--insytful-btn-icon-search-bg-default`	`#2e3339`	Send button background
`--insytful-btn-icon-search-bg-hover`	`#3c444d`	Send button hover background
`--insytful-btn-icon-search-bg-disabled`	`#e7e7e7`	Send button disabled background
`--insytful-btn-icon-search-icon`	`#ffffff`	Send button icon color

Close button


Variable	Default	Notes
`--insytful-btn-close-bg`	`transparent`	Close button background
`--insytful-btn-close-bg-hover`	`#f2f2f2`	Close button hover background
`--insytful-btn-close-icon`	`var(--insytful-text-default)`	Close button icon color
`--insytful-btn-close-size`	`40px`	Close button width/height

Skeleton loader


Variable	Default	Notes
`--insytful-skeleton-bg`	`#e8e8e8`	Loading bar background
`--insytful-skeleton-shimmer`	`linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)`	Shimmer sweep gradient

Error callout


Variable	Default	Notes
`--insytful-callout-error-border`	`#d93025`	Callout border
`--insytful-callout-error-bg`	`#fce8e6`	Callout background
`--insytful-callout-error-text`	`#333333`	Callout body text
`--insytful-callout-error-cta-bg`	`#2e3339`	"Try classic?" CTA button background
`--insytful-callout-error-cta-text`	`#ffffff`	CTA button text
`--insytful-callout-error-cta-border-radius`	`4px`	CTA button corner radius

Search field & focus ring


Variable	Default	Notes
`--insytful-semantic-search-field-stroke`	`#333333`	Input card border color
`--insytful-semantic-search-field-ai-gradient-start`	`#35d2c5`	AI-mode input halo gradient start
`--insytful-semantic-search-field-ai-gradient-end`	`#1d70b8`	AI-mode input halo gradient end
`--insytful-semantic-focus-ring`	`var(--insytful-semantic-search-field-focus)`	Single library-wide token governing every focus ring
`--insytful-semantic-search-field-focus`	`#35d2c5`	Deprecated alias — prefer `--insytful-semantic-focus-ring`

Transitions


Variable	Default	Notes
`--insytful-search-transition-duration`	`200ms`	Skeleton fade / dialog mode-switch duration
`--insytful-search-transition-easing`	`ease`	Transition easing function

Layering


Variable	Default	Notes
`--insytful-z-index`	`999`	Dialog stacking order (fallback value; only set if it collides with something on your page)

Still need help?

If you still need help after reading this article, don't hesitate to reach out to the Insytful community on Slack or raise a support ticket to get help from our team.

New support request