CSS Variable Theme System

Flow is fully driven by CSS custom properties (--flow-*). The FlowTheme interface lists every variable, and applyFlowTheme injects them into the document so you can switch light, dark, or custom palettes without touching component styles.

Theme Overview

• Nodes, edges, handles, backgrounds, panels, toolbars, and minimaps all read from the shared theme tokens
• Two default themes (flowTheme, flowThemeDark) plus presets for blue, green, purple, etc.
• Use createCustomTheme to tweak a preset and applyFlowTheme to swap palettes at runtime

Theme API

API	Description
flowTheme, flowThemeDark	Default light and dark palettes
flowThemePresets	Presets collection (default, dark, blue, green, purple)
FlowThemeName	Theme name union type
createCustomTheme(overrides)	Merge overrides onto the default theme
applyFlowTheme(theme, target?)	Apply the theme to a target element (defaults to document.documentElement)

Example

This demo switches between presets and a custom palette via applyFlowTheme.

Start

Review

Finish

Current theme: default

Theme Switcher

Best Practices

1. Target specific areas: Node, edge, minimap, and toolbar variables can be customized independently inside FlowTheme.
2. Call applyFlowTheme on mount or theme switch: This ensures the CSS custom properties are updated globally.
3. Compose overrides: createCustomTheme merges overrides with a preset, keeping the palette cohesive.