Swappable themes

FlowDrop is designed to blend into your product, not the other way around. Every surface, color, border, and spacing value is driven by semantic CSS custom properties (--fd-*), so you can re-skin the entire editor — nodes, sidebar, toolbar, playground, and dialogs — by overriding a handful of tokens.

Four themes, one editor

FlowDrop ships with four themes out of the box. Each is just a set of --fd-* token overrides — the same editor, re-skinned. Launch any of them live in the demo:

Classic

Full chrome and node palette — the original FlowDrop look.

Minimal

Quieter chrome for embedding inside an existing UI.

Drafter

A sketch-like, low-fidelity whiteboard skin.

Graphite

The default. A calm tool look: one ink primary action, a blue accent for selection and focus, and green, amber and red only for run status. Light and dark.

Choosing a theme

The editor starts in Graphite. People pick another theme in Settings → UI → UI Theme; the choice is remembered per browser. To set it in code, pass its name:

mountFlowDropApp(container, { theme: 'classic' });

The old name 'default' still loads Classic until 3.0.

Any token can still be overridden on top of a built-in theme, and the theme's dark palette is kept:

mountFlowDropApp(container, {
  theme: { name: 'graphite', skin: { tokens: { accent: '#7c3aed' } } }
});

Graphite uses the Inter font, which the library ships as an opt-in stylesheet. Without it the editor uses the system font:

@import '@flowdrop/flowdrop/styles/fonts/inter.css';

On Drupal, set the site's default theme and the navbar logo, name and link in the FlowDrop UI settings, under Appearance.

How it works

Themes are just sets of token overrides. Because every component reads from the same --fd-* semantic tokens, changing a token cascades everywhere at once:

:root {
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;
  --fd-radius-md: 0.75rem;
}

Swap themes at runtime by toggling a class or data- attribute on a wrapping element and scoping your token overrides to it:

[data-fd-theme='violet'] {
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;
  --fd-accent: #8b5cf6;
}

Dark mode works the same way — every semantic token has a dark-mode equivalent that activates automatically via data-theme="dark".

Go deeper