---
title: CSS variables
description: Look up theme colors, typography, spacing, table frames, task checkboxes, and code controls.
---

Set these variables on the Markdown root using `className` in React or the DOM adapter, or `class` in Vue. For the setup and choice between the default theme and your own CSS, see [Styling](/customize/styling).

```css title="assistant-message.css"
.assistant-markdown {
  --smoothstream-foreground: #3b2a20;
  --smoothstream-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --smoothstream-table-border-radius: 0.5rem;
}
```

Defaults below describe the default prose theme unless stated otherwise. `unstyled` removes that theme, so its color, typography, and spacing declarations no longer apply. Functional code controls still read their sizing variables.

Some values are derived from another variable or supplied as a CSS fallback instead of a root declaration. “Foreground at 24%,” for example, means `color-mix(in srgb, var(--smoothstream-foreground) 24%, transparent)`; its visible color depends on the background beneath it.

## Colors

| Variable | Default | Applies to |
| --- | --- | --- |
| `--smoothstream-foreground` | `currentColor` | Base for the theme's derived palette. |
| `--smoothstream-body-color` | Foreground | Body text. |
| `--smoothstream-heading-color` | Foreground | Headings and table header text. |
| `--smoothstream-link-color` | Foreground | Links. |
| `--smoothstream-strong-color` | Foreground | Strong emphasis. |
| `--smoothstream-counter-color` | Body color | Ordered-list markers. |
| `--smoothstream-bullet-color` | Body color | Unordered-list markers. |
| `--smoothstream-border-color` | Foreground at 8% | Shared default borders and separators. |
| `--smoothstream-quote-border-color` | Border color | Blockquote border. |
| `--smoothstream-inline-code-color` | Foreground at 84% | Inline code text. |
| `--smoothstream-inline-code-background` | Foreground at 7% | Inline code background. |
| `--smoothstream-footnote-border-color` | Border color | Footnote section separator. |

Set the foreground to change the overall palette. Set a more specific variable when that element should use an independent color. Avoid setting every derived variable if you want future foreground changes to flow through.

## Typography

Body text inherits its font and size from the application. The default theme uses a `1.625` line height. Use ordinary CSS on your root class to change body typography.

| Variable | Default |
| --- | --- |
| `--smoothstream-font-mono` | System monospace stack: `ui-monospace`, `SFMono-Regular`, `"SF Mono"`, Menlo, Consolas, `"Liberation Mono"`, monospace. |
| `--smoothstream-inline-code-font-size` | `0.875em` |
| `--smoothstream-code-font-size` | Inline code font size |

Heading sizes are semantic CSS rules rather than separate size variables. Use selectors such as `.assistant-markdown h2` to customize them. Heading and spacing defaults scale with the surrounding text rather than a fixed root font size.

## Spacing

| Variable | Default |
| --- | --- |
| `--smoothstream-p-margin-block-start` | `0` |
| `--smoothstream-p-margin-block-end` | `1em` |
| `--smoothstream-ul-margin-block-start` | `0.5em` |
| `--smoothstream-ul-margin-block-end` | `1em` |
| `--smoothstream-ol-margin-block-start` | `0.5em` |
| `--smoothstream-ol-margin-block-end` | `1em` |
| `--smoothstream-ul-li-margin-block` | `0.25em` |
| `--smoothstream-ol-li-margin-block` | `0.25em` |
| `--smoothstream-li-ul-margin-block` | `0.25em` |
| `--smoothstream-li-ol-margin-block` | `0.25em` |
| `--smoothstream-blockquote-margin-block` | `1em` |
| `--smoothstream-hr-margin-block` | `1.75em` |
| `--smoothstream-code-margin-block` | `0.75em` |
| `--smoothstream-table-margin-block` | `0.75em` |
| `--smoothstream-image-margin-block` | `1.5em` for standalone images |
| `--smoothstream-footnote-margin-block-start` | `1.5em` |

Each heading has `--smoothstream-hN-margin-block-start` and `--smoothstream-hN-margin-block-end`, where `N` is its level:

| Heading | Start | End |
| --- | --- | --- |
| `h1` | `1.5em` | `0.5em` |
| `h2` | `1.5em` | `0.25em` |
| `h3` | `1.25em` | `0.25em` |
| `h4`, `h5`, `h6` | `1em` | `0.25em` |

The heading margin variables are registered length properties so `em` resolves on the theme host rather than growing with the heading's own font size.

Spacing also follows structural rules: the root's first child loses its top margin and its last child loses its bottom margin. A paragraph before a list, code block, table frame, or blockquote yields its trailing margin to the following block. The first element inside a list item has no outer block margin. These rules keep gaps consistent as Markdown structure settles.

## Tables

| Variable | Default |
| --- | --- |
| `--smoothstream-table-border-color` | Border color |
| `--smoothstream-table-border-width` | `1px` |
| `--smoothstream-table-border-style` | `solid` |
| `--smoothstream-table-border-radius` | `0.75rem` |
| `--smoothstream-table-header-background` | Foreground at 3% |

Border width, style, and radius apply to the stationary table frame. Border color also supplies body-row separators. Use descendant `table`, `th`, and `td` selectors for cell typography and padding. With `unstyled`, style the supported `[data-smoothstream-table-shell]` hook directly to supply your own frame.

## Code surfaces

The code surface uses an application override first, then a highlighter palette, then the default theme. Token-specific syntax colors remain supplied by the highlighter.

| Variable | Default or fallback | Applies to |
| --- | --- | --- |
| `--smoothstream-code-color` | Highlighter foreground, then inline code color | Base fenced-code text color. |
| `--smoothstream-code-background` | Highlighter background, then foreground at 3% | Fenced-code surface. |
| `--smoothstream-code-border-color` | Surrounding `currentColor` at 6% | Frame of enhanced code blocks. |
| `--smoothstream-code-scrollbar-color` | Surrounding `currentColor` at 24% | Code scrollbar thumb. |
| `--smoothstream-code-scrollbar-hover-color` | Surrounding `currentColor` at 40% | Scrollbar hover color in browsers using the WebKit scrollbar rules. |
| `--smoothstream-code-padding-inline` | `1rem` | Enhanced code content and toolbar horizontal padding. |
| `--smoothstream-code-hidden-padding-block` | `0.725em` | Code content vertical padding when language labels are hidden. |

Language labels, copy controls, and the frame follow the surrounding content color rather than token colors. For syntax theme configuration, see [Syntax highlighting](/customize/syntax-highlighting).

## Code controls

These variables are also consumed by the functional CSS when the default theme is disabled:

| Variable | Fallback | Applies to |
| --- | --- | --- |
| `--smoothstream-code-language-font-size` | `0.875em` | Language label. |
| `--smoothstream-code-copy-button-size` | `max(1.75rem, 1.75em)` | Copy button dimensions and reserved toolbar space. |
| `--smoothstream-code-copy-icon-size` | `max(14px, 1em)` | Copy/check icon dimensions. |
| `--smoothstream-code-copy-inset-block` | `0.45rem` | Floating copy control's vertical inset when labels are hidden. |
| `--smoothstream-code-copy-inset-inline` | `0.45rem` | Floating copy control's horizontal inset. |
| `--smoothstream-code-copy-clearance` | `0.5rem` | Extra room beside the floating control for a single-line code block. |
| `--smoothstream-code-copy-border-radius` | `0.375rem` | Floating control background corners. |

Change the button size separately from the icon size so the hit target can remain larger than the visible icon.

## Task checkboxes

| Variable | Default |
| --- | --- |
| `--smoothstream-task-size` | `1rem` |
| `--smoothstream-task-offset` | `-1px` vertical offset |
| `--smoothstream-task-border-color` | Foreground at 24% |
| `--smoothstream-task-border-radius` | `0.25rem` |
| `--smoothstream-task-checked-background` | Foreground |
| `--smoothstream-task-check-image` | Built-in white SVG checkmark |

The underlying element stays a native disabled checkbox. Forced-colors mode restores its platform appearance; `unstyled` also leaves the native appearance in place.

Use the public `interval`, `duration`, and `reveal` options for playback timing. Internal animation delays, measurement variables, and readiness attributes are managed by Smoothstream rather than theme controls.