CSS variables

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.

.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

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.

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

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

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

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.

Language labels, copy controls, and the frame follow the surrounding content color rather than token colors. For syntax theme configuration, see Syntax highlighting.

Code controls

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

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

Task checkboxes

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.