Getting Creative with Theming

Let's take a tour around the library styles, customization opportunities, and other features that Vue Flow offers out of the box.

Library Styles

Vue Flow values flexibility and allows you to take the lead when it comes to styling. It showcases some obligatory stylings that must be imported, while leaving optional features, such as the default theme, up to your preference.

To import the necessary and optional styles:

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

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

Tweaking the Default Theme

The Vue Flow default theme functions as your baseline, which you can customize and decorate as per your liking using CSS rules, style and class properties, and CSS variables.

Styling with CSS Classes

Here's how you can use CSS classes to add a pop of color or alter the font style for the theme:

/* Use a purple theme for our custom node */
.vue-flow__node-custom {
    background: purple;
    color: white;
    border: 1px solid purple;
    border-radius: 4px;
    box-shadow: 0 0 0 1px purple;
    padding: 8px;
}

Using CSS Properties

You can also directly pass a style or class attribute to Vue Flow components and nodes/edges.

Below are a couple of examples on how you can do this:

Directly styling the Vue Flow component:

<div style="height: 300px">
  <VueFlow
    v-model="elements"
    
    <!-- You can pass a class name to the component -->
    class="my-diagram-class"

    <!-- You can pass an object containing CSSProperties or CSS variables -->
    :style="{ background: 'red' }"
  />
</div>

Styling nodes/edges with a style or class attribute:

::: code-group

/* Customizing node by assigning class and style properties */
const nodes = ref([
  { 
    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' },
  },
])

import type { Node } from '@vue-flow/core';

/* Customizing node by assigning class and style properties */
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' },
  },
])

:::

Redefining Styles with CSS variables

Some of the defined theme styles can be overwritten using CSS variables. These alterations can be implemented either on a global scale or to individual elements.

::: code-group

/* Global default CSS variable values */
:root {
    --vf-node-bg: #fff;
    --vf-node-text: #222;
    --vf-connection-path: #b1b1b7;
    --vf-handle: #555;
}

const elements = ref([
  /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
  { id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
])

import type { Elements } from '@vue-flow/core';

const elements = ref<Elements>([
  /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
  { id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
])

:::

CSS Variables

Here's a concise list of CSS variables you can consider, along with their effects:

Variable	Effect
--vf-node-color	Defines node border, box-shadow, and handle colors
--vf-box-shadow	Defines color of node box-shadow
--vf-node-bg	Defines node background color
--vf-node-text	Defines node text color
--vf-handle	Defines node handle color
--vf-connection-path	Defines connection line color

CSS Class Names

Here you'll find a handy reference guide of class names and their respective containers:

Name	Container
.vue-flow	The outer container
.vue-flow__container	Wrapper for container elements
.vue-flow__viewport	The inner container
.vue-flow__transformationpane	Pane for movements like zooming and panning
.vue-flow__selectionpane	Pane for handling user selection
.vue-flow__selection	Defines current user selection box
.vue-flow__edges	Wrapper rendering edges
.vue-flow__edge	Wrapper around each edge element
.vue-flow__edge-{type}	Edge type (either custom or default)
.vue-flow__edge .selected	Defines the currently selected edge(s)
.vue-flow__edge .animated	Defines an animated edge
.vue-flow__edge-path	SVG path for edge elements
.vue-flow__edge-text	Wrapper around edge label
.vue-flow__edge-textbg	Background wrapper around edge label
.vue-flow__connectionline	Container for the connection line elements
.vue-flow__connection	Individual connection line element
.vue-flow__connection-path	SVG path for connection line
.vue-flow__nodes	Rendering wrapper around nodes
.vue-flow__node	Wrapper around each node element
.vue-flow__node .selected	Defines the currently selected node(s)
.vue-flow__node-{type}	Node type (either custom or default)
.vue-flow__nodesselection	Defines selection rectangle for nodes
.vue-flow__handle	Wrapper around node handle elements
.vue-flow__handle-bottom	Defines a handle at bottom
.vue-flow__handle-top	Defines a handle at top
.vue-flow__handle-left	Defines a handle at left
.vue-flow__handle-right	Defines a handle at right
.vue-flow__handle-connecting	Connection line is over the handle
.vue-flow__handle-valid	Connection line over handle with valid connection
.vue-flow__background	Background component
.vue-flow__minimap	MiniMap component
.vue-flow__controls	Controls component

8.7 KiB Raw Blame History