Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

Dark Mode

This example demonstrates how to implement dark mode in Svelte Flow. You can customize the appearance of nodes, edges, and the background to create a cohesive dark theme that matches your application’s design system.

<script lang="ts"> import { SvelteFlow, Background, Controls, MiniMap, Panel, type Node, type Edge, type ColorMode, } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css'; import { initialNodes, initialEdges } from './nodes-and-edges'; let nodes = $state.raw<Node[]>(initialNodes); let edges = $state.raw<Edge[]>(initialEdges); let colorMode: ColorMode = $state('system'); </script> <SvelteFlow bind:nodes bind:edges {colorMode} fitView> <Background /> <Controls /> <MiniMap /> <Panel> <select bind:value={colorMode}> <option value="dark">dark</option> <option value="light">light</option> <option value="system">system</option> </select> </Panel> </SvelteFlow>
Last updated on