CSS Variables

Every visual property in WireFlow reads from a --flow-* CSS custom property declared on .flow-container. The structural layer provides fallback defaults; theme layers override them.

Override any variable on .flow-container or inline via style:

.flow-container {
    --flow-bg-color: #0d1117;
    --flow-node-bg: #161b22;
    --flow-edge-stroke: #58a6ff;
}

<x-flow
    :nodes="$nodes"
    :edges="$edges"
    style="--flow-edge-stroke: #4ade80; --flow-node-bg: #1a2e1e;"
>
    <x-slot:node>
        <span x-text="node.data.label"></span>
    </x-slot:node>
</x-flow>

Quick brand override

To match your brand, override these accent-related variables. Everything else derives from the neutral scale and stays visually consistent.

.flow-container {
    /* Interactive states (selection, hover, focus) */
    --flow-node-hover-border-color: #2563eb;
    --flow-node-selected-border-color: #2563eb;
    --flow-node-selected-shadow: 0 0 0 1px #2563eb;
    --flow-node-focus-outline: 2px solid #2563eb;

    /* Handles */
    --flow-handle-hover-bg: #2563eb;
    --flow-handle-active-bg: #2563eb;

    /* Edges */
    --flow-edge-stroke-selected: #2563eb;
    --flow-edge-dot-fill: #2563eb;
    --flow-edge-focus-stroke: #2563eb;

    /* Selection box & lasso */
    --flow-selection-bg: rgba(37, 99, 235, 0.06);
    --flow-selection-border: 1px solid rgba(37, 99, 235, 0.3);
    --flow-lasso-stroke: rgba(37, 99, 235, 0.5);

    /* Resize handles */
    --flow-resizer-border: 1px solid #2563eb;
    --flow-resizer-hover-bg: #2563eb;

    /* Accent stripe (top border on nodes) */
    --flow-node-border-top: 2.5px solid #93c5fd;
}

Replace #2563eb / #93c5fd with your brand color and its lighter variant.

Runtime theme switching

CSS variables are live -- changing them at runtime immediately updates the flow.

<x-flow :nodes="$nodes" :edges="$edges">
    <x-slot:node>
        <span x-text="node.data.label"></span>
    </x-slot:node>

    <x-flow-panel position="top-right">
        <button
            class="px-3 py-1.5 text-sm rounded border"
            x-on:click="
                const c = $el.closest('.flow-container');
                c.style.setProperty('--flow-node-selected-border-color', '#dc2626');
                c.style.setProperty('--flow-edge-stroke-selected', '#dc2626');
                c.style.setProperty('--flow-handle-active-bg', '#dc2626');
            "
        >
            Red Accent
        </button>
    </x-flow-panel>
</x-flow>

Full variable reference

Container & Canvas

Nodes

Handles

Edges

Edge Labels

Connection Line

Selection

Controls

Minimap

Node Toolbar

Drag Handle

Resize Handles

Panel

Group Nodes

Validation

Rotate Handle

Whiteboard Tools

Layout Animation

Z-Index Layers

WireFlow uses a structured z-index system for element stacking. These values are hardcoded in structural CSS and are not themeable.

To override stacking for a specific use case:

.flow-panel {
    z-index: 15; /* put panels above controls */
}

Override examples with Blade

Override at the component level using inline styles:

{{-- Custom dark canvas with green accents --}}
<x-flow
    :nodes="$nodes"
    :edges="$edges"
    background="dots"
    style="
        --flow-bg-color: #0f172a;
        --flow-bg-pattern-color: rgba(255,255,255,0.05);
        --flow-node-bg: #1e293b;
        --flow-node-border: 1px solid #334155;
        --flow-node-selected-border-color: #22c55e;
        --flow-edge-stroke: #64748b;
        --flow-edge-stroke-selected: #22c55e;
        --flow-handle-bg: #64748b;
        --flow-handle-hover-bg: #22c55e;
    "
>
    <x-slot:node>
        <x-flow-handle type="target" position="top" />
        <span class="text-slate-200" x-text="node.data.label"></span>
        <x-flow-handle type="source" position="bottom" />
    </x-slot:node>
</x-flow>

{{-- Compact nodes with no accent stripe --}}
<x-flow
    :nodes="$nodes"
    :edges="$edges"
    style="
        --flow-node-padding: 4px 8px;
        --flow-node-font-size: 12px;
        --flow-node-border-radius: 4px;
        --flow-node-border-top: var(--flow-node-border);
        --flow-handle-size: 8px;
    "
>
    <x-slot:node>
        <x-flow-handle type="target" position="top" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" position="bottom" />
    </x-slot:node>
</x-flow>

Related

• Themes -- built-in themes and custom theming
• Dark Mode -- class-based dark mode