Skip to content

Theming

The default node, Controls and edges are styled inline from CSS variables, each with a fallback, so they need no stylesheet and no utility framework. Set any of these on an ancestor:

--flowinger-surface · --flowinger-surface-raised · --flowinger-border · --flowinger-text · --flowinger-text-dim · --flowinger-edge · --flowinger-selected (a selected node, and the line you drag) · --flowinger-radius

--flowinger-surface-raised (the buttons of Controls) falls back to --flowinger-surface, so a theme that sets only the surface and the text — light or dark — has controls that can be read.

Nodes you supply are yours to style. The elements carry react-flow__* class names as well as flowinger-* ones, so existing stylesheets and tests that select on React Flow’s keep working.