Theming

The connect window of @aiconnect/react reads its colors, font, radius and width from CSS custom properties named --aic-*. They come from @aiconnect/design, and @aiconnect/react/styles.css includes them. You theme the window by setting these properties in your own stylesheet.

Set your tokensCopy Anchor Link

Write the tokens you want to change on :root, in a stylesheet loaded after @aiconnect/react/styles.css. When both rules have the same specificity, the later one wins.

import '@aiconnect/react/styles.css';
import './aiConnectTheme.css';

Taamtaam's theme sets its font and its warm palette:

/* The AI Wallet connect window in TaamTaam's palette. */
:root {
  --aic-font: var(--font-montserrat), sans-serif;
  --aic-ink: #2f2b22;
  --aic-muted: #5c5544;
  --aic-surface: #ffffff;
  --aic-ground: #f7f5f0;
  --aic-border: #e2ddd1;
  --aic-accent: #6f6754;
  --aic-accent-ink: #ffffff;
  --aic-danger: #b3261e;
}

You can also set the tokens on any element that wraps the provider, to theme one part of the page.

The tokensCopy Anchor Link

The cyan tokens draw AI Wallet's mark in its ring, the same mark the wallet itself shows. The disc at the center of the ring keeps a white background in both palettes.

Dark modeCopy Anchor Link

The light palette applies by default. An element with data-aic-theme="dark" gives the window under it the dark palette, and data-aic-theme="auto" follows the system setting.

The connect window renders inside AiConnectProvider, right after its children. Put the attribute on an element that contains the provider, such as <html>:

<html lang="en" data-aic-theme="auto">

When your site has its own dark mode switch, set the attribute from it, or skip the attribute and write the dark values under your own dark selector:

:root {
  --aic-ink: #2f2b22;
  --aic-surface: #ffffff;
  --aic-accent: #6f6754;
}

/* The site puts class="dark" on <html> in dark mode. */
.dark {
  --aic-ink: #f1ede4;
  --aic-surface: #1d1b17;
  --aic-accent: #d8cfba;
  color-scheme: dark;
}

Right to leftCopy Anchor Link

The window's reading direction comes from the dir field of its messages. The built in Hebrew messages set dir: 'rtl':

<AiConnectProvider client={client} locale="he">

The provider puts dir on the window's outer element, so the layout mirrors and the help screen's list indents from the right. When you pass your own messages, set dir to match their language. Pick a --aic-font with Hebrew glyphs, or keep inherit when your page font has them.

MotionCopy Anchor Link

The window fades in, the card rises, and the arcs pulse while the wallet waits for the visitor. Under prefers-reduced-motion: reduce these animations are off.