April 24, 2026 6 min readFreeFlowCharts Team

7 Flowchart Themes & Custom Backgrounds: Make Your Diagrams Stand Out

themes customization design flowchart dark-mode

Not every flowchart belongs on a dark canvas. Whether you're embedding a diagram in a light-themed document, presenting to a client, or just want a different aesthetic, your flowchart tool should adapt. Today we're shipping 7 built-in visual themes and custom background support — both in the editor and via the API.

The 7 themes

Each theme changes everything: background, node colors, edge styles, fonts, and overall mood.

Default: — Dark canvas (#13131f) with translucent colored nodes. Clean, minimal, modern.

Neon: — Pure black background with glowing neon edges and nodes. Animated dashed connectors. Cyberpunk vibes.

Pastel: — Warm cream background (#faf7f2) with soft muted colors and serif fonts. Gentle and approachable.

Retro: — Dark gradient with gold/amber tones, double-stroke borders, and serif typography. Vintage blueprint feel.

Ocean: — Deep blue gradient with translucent nodes and dashed white edges. Calm and professional.

Brutalist: — White background, black nodes, thick borders, monospace font. Raw and bold.

Candy: — Vibrant purple background with solid bright nodes and thick white connectors. Fun and playful.

Custom backgrounds

Themes set a default background, but you can override it with any hex color or CSS gradient:

"background": "#1a1a2e"
"background": "linear-gradient(135deg, #667eea, #764ba2)"

This works in both the editor (click the palette icon) and the API (background field on create, ?bg= param on export).

Contrast-aware rendering

Here's where it gets clever. Themes like Ocean and Default use white translucent edges designed for dark backgrounds. But what happens if you set a white custom background? The connectors would vanish.

We solved this with automatic contrast detection. When the effective background is light, the rendering engine flips white edges, arrows, labels, and text to dark equivalents. This happens everywhere:

Live viewer: (/view/{id}) — edges, labels, node text, descriptions

Editor: — re-themes in real time when you change the background

SVG/PNG export: — title, edges, arrows, node labels, branding

You don't have to think about it. Pick any theme, set any background, and the diagram stays readable.

Using themes via the API

Pass the theme field when creating a flowchart:

{
  "title": "My Flow",
  "theme": "ocean",
  "background": "#ffffff",
  "nodes": [...],
  "edges": [...]
}

The available themes are: default, neon, pastel, retro, ocean, brutalist, candy.

You can also override the theme on export with the ?theme= query parameter:

GET /api/export/svg?id=YOUR_ID&theme=neon
GET /api/export/png?id=YOUR_ID&theme=pastel&bg=%23faf7f2

Which theme should you use?

Presentations on dark slides: Default, Neon, or Ocean

Documents and light backgrounds: Pastel or Brutalist

Technical diagrams: Default or Retro

Fun / informal: Candy or Neon

Client-facing / professional: Ocean or Pastel

Try it now

Open FreeFlowCharts, click the var(--t-text)]">palette icon in the toolbar, and switch themes. Your entire canvas updates instantly — nodes, edges, everything. Or create a themed flowchart via the [API with a single POST request.