Theming

Diagrams follow the site’s light and dark mode. To restyle them, override tokens: CSS variables that start with --idocs-. Nothing in the renderer uses a colour that is not a token.

Pick a palette to see the same diagram restyled. The snippet under each is the only CSS involved.

Default

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Pay with a card

Web app

Payments API

:8080

Ledger database

Stripe

card processor

RabbitMQ

payment.events

Receipt mailer

planned

src/styles/custom.css

/* Nothing to write. The defaults follow the site theme. */

Blueprint

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Pay with a card

Web app

Payments API

:8080

Ledger database

Stripe

card processor

RabbitMQ

payment.events

Receipt mailer

planned

src/styles/custom.css

.idocs {
--idocs-bg: #0a2540;
--idocs-surface: #0f3256;
--idocs-zone: #0c2c4c;
--idocs-ink: #e6f2ff;
--idocs-muted: #9bbfe0;
--idocs-line: #35689b;
--idocs-accent: #7fd3ff;
}

Terminal

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Pay with a card

Web app

Payments API

:8080

Ledger database

Stripe

card processor

RabbitMQ

payment.events

Receipt mailer

planned

src/styles/custom.css

.idocs {
--idocs-bg: #050806;
--idocs-surface: #0b110c;
--idocs-zone: #08100a;
--idocs-ink: #c9f7d3;
--idocs-line: #1f4a2b;
--idocs-accent: #4ade80;
--idocs-sans: var(--idocs-mono);
}

Ink

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Pay with a card

Web app

Payments API

:8080

Ledger database

Stripe

card processor

RabbitMQ

payment.events

Receipt mailer

planned

src/styles/custom.css

.idocs {
--idocs-bg: #fbfaf8;
--idocs-surface: #ffffff;
--idocs-zone: #f1f0ed;
--idocs-ink: #121212;
--idocs-line: #1f1f1f;
--idocs-accent: #d4281c;
--idocs-shadow: 3px 3px 0 #1f1f1f;
}

Where to put the CSS

Override tokens under .idocs in src/styles/custom.css (the file the starter already loads). To style only some diagrams, scope the rule to a wrapper:

.my-team-docs .idocs {
  --idocs-accent: #7a4ec4;
}

<div class="my-team-docs">
  <Diagram name="checkout" />
</div>

For dark mode, add a second rule. The site sets data-theme on the page, and the renderer follows it:

.idocs {
  --idocs-accent: #7a4ec4;
}
:root[data-theme='dark'] .idocs {
  --idocs-accent: #b79bf0;
}

Specificity

The renderer’s own dark-mode rule is :root[data-theme='dark'] .idocs. If you restyle both themes, use the same selector for dark mode so the order of your CSS decides, or make yours more specific.

Tokens

Surfaces and text

Token	Used for
--idocs-bg	The canvas and frame background.
--idocs-surface	Cards, buttons, panels.
--idocs-surface-2	Table headers, phase bands, hover states.
--idocs-zone	The fill of top-level groups.
--idocs-ink	Primary text and the default line colour.
--idocs-muted	Secondary text and data lines.
--idocs-line	Borders and hairlines.
--idocs-tile	The tile behind coloured brand logos.
--idocs-shadow	The shadow under cards and panels.

Accent and status

Token	Used for
--idocs-accent	Highlights, the active step, packets, requests.
--idocs-accent-soft	Soft accent backgrounds, such as a selected step.
--idocs-tunnel	The tunnel edge kind.
--idocs-ok, --idocs-ok-soft	Responses and success.
--idocs-warn, --idocs-warn-soft	Events, planned and legacy tags.
--idocs-bad, --idocs-bad-soft	Errors.

Behaviour

Token	Meaning
--idocs-dim	How faded unrelated items get while a reader focuses a box or a scenario plays. 0.5 by default; 1 turns fading off.

Fonts

Token	Meaning
--idocs-sans	Text. Defaults to IBM Plex Sans, then the system font.
--idocs-mono	The bar’s counts, step labels, the interfaces table. Defaults to IBM Plex Mono.

The starter loads IBM Plex through @fontsource/ibm-plex-sans and @fontsource/ibm-plex-mono. Change the fonts by loading your own and setting these two tokens.

Colour families

Each family has two tokens: the accent and a tinted background. See colours.

Matching your site

If your docs site already has a palette, map the tokens to it once, and diagrams follow when you change it:

.idocs {
  --idocs-accent: var(--sl-color-accent);
  --idocs-ink: var(--sl-color-white);
  --idocs-surface: var(--sl-color-black);
}

The full list of defaults is at the top of packages/react/src/styles.css in the repository.