Theming: make it blend in

Every Olotalk surface renders in a shadow root, so your page’s stylesheet can’t reach inside it. That’s deliberate, it’s what keeps citations, the grounding badge, and the “answer / no answer” states intact no matter how the surface is styled. You can restyle what it looks like; you can’t remove what it says.

To skin it, you set a small set of CSS custom properties. Those do cross the shadow boundary. Put them anywhere the surface inherits from, :root is simplest, and the assistant picks them up.

:root {
  --olotalk-font-family: 'Inter', system-ui, sans-serif;
  --olotalk-accent: #4f46e5;
  --olotalk-surface: #ffffff;
  --olotalk-text: #111827;
  --olotalk-radius: 10px;
}

That’s the whole integration. No JavaScript, no config object, no rebuild. This works for every placement, the corner bubble and the inline assistant both read the same tokens.

Set nothing and the surface looks exactly as it ships. Every token falls back to its built-in value, so adding this is never a restyle you didn’t ask for, it only changes what you explicitly set.

1
--olotalk-font-familyAll text
2
--olotalk-accentLinks, send, focus
3
--olotalk-surfacePanel background
4
--olotalk-textMessage text
5
--olotalk-radiusButton & input corners
6
--olotalk-borderDividers & edges

Tokens

Token	Controls
`--olotalk-font-family`	Typeface for all text. The highest-leverage token, matching your site’s font is what makes the surface read as yours.
`--olotalk-font-size`	Base text size.
`--olotalk-line-height`	Base line height.
`--olotalk-accent`	Accent / primary colour, links, the send action, focus.
`--olotalk-text`	Primary text colour.
`--olotalk-muted`	Secondary text, timestamps, captions, placeholders.
`--olotalk-surface`	Main panel background.
`--olotalk-surface-alt`	Secondary background, header, hovered rows, chips.
`--olotalk-border`	Divider and border colour.
`--olotalk-radius`	Corner radius for buttons, inputs, chips.
`--olotalk-radius-panel`	Corner radius for the outer panel.
`--olotalk-shadow`	Panel drop shadow.

Set only the ones you care about. A common minimal set is --olotalk-font-family, --olotalk-accent, and --olotalk-surface, enough to make the surface feel native on most sites.

Coverage

The chat assistant only reads the tokens it actually paints. Nothing breaks if you set one it ignores, it’s simply inert:

Chat assistant (floating and embedded) reads every token except --olotalk-font-size, it derives text sizes from its own type scale, driven by --olotalk-font-family and --olotalk-line-height.

What you can’t theme (on purpose)

Spacing and layout. There are no tokens for padding, gaps, or element sizes. Inheriting a host page’s full styling is what makes an embedded component look broken on pages with unusual CSS, so the surface keeps its own internal rhythm and only exposes appearance. This is a deliberate boundary, not a missing feature.

The trust layer. Citations, the source list, the grounding badge, and the honest “I don’t have that” refusal are structural. Tokens change their colour, type, and radius; they can’t hide or remove them. A skin can’t turn a grounded assistant into one that looks like it’s answering when it isn’t.

Precedence

When a value is set in more than one place, the most specific wins:

--olotalk-* token

in your stylesheet

overrides

dashboard appearance

configured per assistant

overrides

built-in default

what ships

A --olotalk-* token you set in your stylesheet overrides the same value configured in the Olotalk dashboard, which overrides the built-in default. The token wins because it’s the most local expression of intent, you, editing the page you’re embedding into.

Dark mode

Tokens are for blending in, not for switching light/dark. To render the chat assistant in dark mode, use its theme option (theme: 'dark'), a separate axis from tokens. You can then still layer tokens on top to tune the dark palette to your brand.

Example: an in-page chat that matches your site

Embedding the chat inline (see Embed reference → Embedded mode) and want it to look like part of the page rather than a bolted-on assistant? Pair the embed with a few tokens:

<div id="chat" style="height: 560px;"></div>

<style>
  :root {
    --olotalk-font-family: var(--site-font, 'Inter', sans-serif);
    --olotalk-accent: #0d9488;
    --olotalk-surface: #fbfbf9;
    --olotalk-surface-alt: #f0efe9;
    --olotalk-border: #e4e2da;
    --olotalk-text: #1c1b19;
    --olotalk-radius: 8px;
    --olotalk-radius-panel: 12px;
  }
</style>

<script>
  window.OlotalkConfig = {
    assistantId: 'ast_oltk_7Kd2mQxRv9TbNhLpW3Zsy',
    mode: 'inline',
    mount: '#chat',
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/@olotalk/assistant-loader@0/dist/loader.iife.js" async></script>

Reuse a variable your site already defines (--site-font above) and the assistant inherits your typography automatically.