Skip to content
On this page

Theming

Library styles

VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e. the default theme) can be skipped.

/* these are necessary styles for vue flow */
@import '@braks/vue-flow/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@braks/vue-flow/dist/theme-default.css';

Customizing default theme

When you are using the default theme there are three ways how you can style the graph pane and the elements. You can create your own CSS rules, pass style/class properties to the components or use the available css variables.

Using classes

You can customize the default theme by simply overwriting the class definitions with your own custom ones.

.vue-flow {
  background: red;
}

Using styles

You can also pass a style or class attribute directly to the Vue Flow component.




 



<div style="height: 300px">
  <VueFlow
    v-model="elements"
    :style="{ background: 'red' }"
  />
</div>

Nodes/Edges can also be styled with a style or class attribute.







 
 
 
 
 







 
 
 
 
 
 
 
 



const nodes = ref<Node[]>([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 250, y: 5 },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
  
  { 
    id: '2', 
    label: 'Node 2', 
    position: { x: 100, y: 100 }, 
    
    /* 
     * You can also use a function which will receive your current element as it's input.
     * Useful if you want to add styles if the element is selected
     */
    style: (el) => {
      if (el.selected) return { background: 'purple' }
      return { background: 'green' }
    }
  },
])

Using CSS variables

Some theme stylings can be overwritten by using css variables. These variables can either be applied globally or you can define them on an element basis.

/* global defaults */
:root {
  --vf-node-bg: #fff;
  --vf-node-text: #222;
  --vf-connection-path:  #b1b1b7;
  --vf-handle: #555;
}



 
 







const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  
  // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
  
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])

CSS Variables

VariableEffect
--vf-node-colorNode border, box-shadow and handle color
--vf-box-shadowNode box-shadow color
--vf-node-bgNode background color
--vf-node-textNode font color
--vf-handleNode handle color
--vf-connection-pathConnectionline color

Classes

NameContainer
.vue-flowOuter container
.vue-flow__containerWrapping container elements
.vue-flow__viewportInner container
.vue-flow__transformationpaneZoom & pan pane
.vue-flow__selectionpaneSelection pane
.vue-flow__selectionUser selection
.vue-flow__edgesEdges renderer wrapper
.vue-flow__edgeEdge element wrapper
.vue-flow__edge-Edge type, either a custom or default type
.vue-flow__edge .selectedSelected Edge
.vue-flow__edge .animatedAnimated edge
.vue-flow__edge-pathEdge element svg path
.vue-flow__edge-textEdge label wrapper
.vue-flow__edge-textbgEdge label wrapper background
.vue-flow__connectionlineConnection line container element
.vue-flow__connectionConnection line element
.vue-flow__connection-pathConnection line svg path
.vue-flow__nodesNodes renderer wrapper
.vue-flow__nodeNode element wrapper
.vue-flow__node .selectedSelected Node
.vue-flow__node-Node type, either a custom or default type
.vue-flow__nodesselectionNodes selection rect
.vue-flow__handleNode handle element wrapper
.vue-flow__handle-bottomHandle position bottom
.vue-flow__handle-topHandle position top
.vue-flow__handle-leftHandle position left
.vue-flow__handle-rightHandle position right
.vue-flow__handle-connectingConnectionline is above handle
.vue-flow__handle-validConnectionline is above handle & the connection is valid
.vue-flow__backgroundBackground component
.vue-flow__minimapMini map component
.vue-flow__controlsControls component

Released under the MIT License.