# Theming (/docs/guides/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 tokens [#set-your-tokens]

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.

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

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

```css title="aiConnectTheme.css"
/* 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 tokens [#the-tokens]

| Token | Light | Dark | What it styles |
| --- | --- | --- | --- |
| `--aic-font` | `inherit` | `inherit` | The font of the whole window. |
| `--aic-ink` | `#0b0d12` | `#f3f4f6` | Titles, body text and the help link. |
| `--aic-muted` | `#5e636d` | `#9aa0aa` | Hints, the help screen's list and the close button. |
| `--aic-surface` | `#ffffff` | `#17181d` | The card's background. |
| `--aic-ground` | `#f6f7f9` | `#0e0f13` | The close button's background. |
| `--aic-border` | `#e6e8ec` | `#2a2c33` | The card's border and the help link's underline. |
| `--aic-accent` | `#0b0d12` | `#f3f4f6` | The main button's background. |
| `--aic-accent-ink` | `#ffffff` | `#0e0f13` | The main button's text. |
| `--aic-cyan` | `#0ab9f7` | `#0ab9f7` | The wallet mark in the disc, the inner arcs and the disc's border while the wallet waits for the visitor. |
| `--aic-cyan-soft` | `#7fddfb` | `#7fddfb` | The disc's border at rest and the middle arcs while the wallet waits. |
| `--aic-cyan-faint` | `#cff4fc` | `#0f3a49` | The arcs at rest. |
| `--aic-halo` | `#e3f8fd` | `#0c2a35` | The halo around the disc. |
| `--aic-focus` | `#0ab9f7` | `#0ab9f7` | The focus ring of buttons and links. |
| `--aic-backdrop` | `rgba(11, 13, 18, 0.42)` | `rgba(0, 0, 0, 0.6)` | The layer behind the card, which also blurs the page. |
| `--aic-shadow` | `0 24px 64px rgba(11, 13, 18, 0.2)` | `0 24px 64px rgba(0, 0, 0, 0.55)` | The card's shadow. |
| `--aic-radius` | `24px` | `24px` | The card's corner radius. |
| `--aic-width` | `380px` | `380px` | The card's width, capped to the viewport. |
| `--aic-danger` | `#c4321f` | `#ff8a7a` | Part of the token set. The connect window's styles do not read it in this release. |

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 mode [#dark-mode]

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>`:

```tsx title="app/layout.tsx"
<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:

```css title="aiConnectTheme.css"
: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;
}
```

<Callout type="info">
If you override a token on `:root` and also use `data-aic-theme="dark"` on `<html>`, your `:root` rule and the SDK's dark rule match the same element with the same specificity. Your rule comes later and wins, so set the dark value of each token you override as well.
</Callout>

## Right to left [#right-to-left]

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

```tsx
<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.

## Motion [#motion]

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.