Styling & Theming

Customize the look and feel of your flow diagrams with CSS.

Theme Support

kaykay supports light and dark themes via CSS classes.

<!-- Dark theme (default) -->
<div class="kaykay-dark">
  <Canvas ... />
</div>

<!-- Light theme -->
<div class="kaykay-light">
  <Canvas ... />
</div>

Custom Node Styles

Style nodes using standard CSS. Each example on the canvas shows a different styling approach.

Gradient - CSS gradients for backgrounds
Glass - Backdrop blur and transparency
Neon - Glowing box-shadow effects
Minimal - Clean, simple borders
Rounded - Pill-shaped nodes
Shadow - Layered shadow effects
Custom Handles - SVG, emoji, or image handles

Edge Styling

Customize edges with colors, styles, and animations.

const edges = [
  {
    id: 'e1',
    source: 'a',
    target: 'b',
    // Custom color
    color: '#8b5cf6',
    // Line style: solid, dashed, dotted
    style: 'dashed',
    // Animated dashes
    animated: true,
    // Edge type: bezier, step, straight
    type: 'bezier'
  }
];

Custom Handle Shapes

Add SVG, images, emojis, or any content inside handles using the children slot.

<!-- Diamond SVG handle -->
<Handle id="in" type="input" port="data">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 0L16 8L8 16L0 8Z" 
          fill="#f59e0b"/>
  </svg>
</Handle>

<!-- Emoji handle -->
<Handle id="out" type="output" port="signal">
  <span>⚡</span>
</Handle>

<!-- Image handle -->
<Handle id="img" type="input" port="image">
  <img src="/icon.png" alt="handle" />
</Handle>

CSS Variables

Override these CSS variables to customize the theme:

:root {
  --kaykay-bg: #0a0a14;
  --kaykay-grid: #252422;
  --kaykay-edge: #888;
  --kaykay-edge-selected: #eb5425;
  --kaykay-handle: #eb5425;
  --kaykay-selection: rgba(74, 158, 255, 0.2);
}

Tip: Use :global() in Svelte component styles to target nested kaykay elements.

Gradient Node

Glass Effect

Neon Glow

Minimal

Rounded

Deep Shadow

Custom Handles

⚡

🔗