Learn / Theming
Theming
One Theme object drives the canvas chrome, node defaults, link colors and selection states — swap it and everything repaints. Per-node styling stays in the spec, so themes and data never fight.
Built-in themes
// exported from @grafloria/react, @grafloria/vue, or @grafloria/renderer
import { LIGHT_THEME, DARK_THEME } from '@grafloria/react';
// React
<GrafloriaFlow theme={dark ? DARK_THEME : LIGHT_THEME} ... />
// Vue — a computed ref works
<GrafloriaFlow :theme="theme" ... />
// Angular
<grafloria-diagram-canvas [theme]="theme" ... />
// element attribute (strings only here)
<grafloria-flow theme="dark" ...>
Switching is live — no remount, no data loss. At runtime on any instance:
instance.setTheme(DARK_THEME).
App-wide defaults (Angular)
bootstrapApplication(App, {
providers: [provideGrafloria({ theme: DARK_THEME })],
});
Precedence: a canvas-level [theme] binding → the provided default →
LIGHT_THEME.
Adopting your design system: the token bridge
If your app already speaks CSS variables — shadcn, MUI, Tailwind — hand them over
with tokenBridge and the canvas derives its colors from
your tokens instead of its own palette. The diagram stops looking embedded and
starts looking native.
Per-node and per-edge styling
Theme = the room; spec styling = the furniture:
{ id: 'a', position: { x: 60, y: 80 },
shape: { type: 'terminal', fill: '#ecfdf5', stroke: '#059669', cornerRadius: 10 } }
{ id: 'e1', source: 'a', target: 'b',
style: { stroke: '#9333ea', strokeWidth: 2, strokeDasharray: '6 3' }, label: 'retry' }
And because custom nodes are your own HTML (React components, Vue slots, Angular templates, plain templates), they inherit your app's stylesheet directly — the element renders in light DOM precisely so your CSS cascades in.
<style> block per instance
and exposes --grafloria-* variables — there is no stylesheet you must
import, in any framework.