LangStop

Table Themes & Styles | ERD Generator Docs

The Table Themes & Styles system lets you instantly change the visual appearance of tables and edges in your ER diagram using predefined, curated themes.

Themes are designed to be:

  • Visually consistent
  • Accessible (WCAG-aware)
  • Export-friendly
  • Zero-configuration (no manual color tweaking required)

You simply pick a theme — everything else updates automatically.

What a theme controls

Each table theme defines a complete visual contract:

  • Header background color
  • Header text color
  • Body background color
  • Body text color
  • Table borders
  • Drop shadows (optional)
  • Edge color harmony
  • Light / Dark mode alignment
  • Accessibility contrast ratios

All values are bundled in a single ErdTheme object to ensure consistency.

Available theme templates

You can choose from the following built-in themes:

Neutral & Professional

  • graphite, graphiteDark
  • classic, classicDark
  • slate
  • mono
  • ink

Best for documentation, architecture reviews, and long editing sessions.

Color-forward & Expressive

  • lavender, lavenderDark
  • emerald, emeraldDark
  • ruby, rubyDark
  • ocean, oceanDark
  • sunset, sunsetDark
  • coral
  • pastel

Ideal for presentations, demos, and stakeholder walkthroughs.

Themed & Stylized

  • cyberpunk, cyberpunkDark
  • forest, forestDark
  • coffee, coffeeDark
  • solarized, solarizedDark

Perfect for branding, mood-driven diagrams, and screenshots.

Light vs Dark themes

Most themes are available in light and dark variants.

When to use light themes

  • Print exports
  • Documentation pages
  • Daylight environments

When to use dark themes

  • Long editing sessions
  • Low-light environments
  • High-density diagrams
  • Screen presentations

Each dark theme explicitly sets:

  • isDark: true
  • Tuned background contrast
  • Reduced eye strain colors

Accessibility guarantees

Each theme includes accessibility metadata:

  • Header contrast ratio
  • Body contrast ratio
  • WCAG AA compliance flags

This ensures:

  • Header text is readable at all zoom levels
  • Column names remain legible
  • Body text meets minimum contrast requirements

Themes that do not meet AA standards are excluded by design.

How themes affect edges

Edges automatically adapt to the active theme:

  • Border colors harmonize with table borders
  • Relationship lines maintain sufficient contrast
  • Arrowheads and labels remain readable

No manual edge styling is required.

Switching themes safely

  • Theme changes are non-destructive
  • No layout recalculation occurs
  • Node positions and relationships remain untouched
  • Safe to switch even on large diagrams

This allows rapid visual iteration without risk.

Use Case Suggested Themes
Daily editing graphite, slate, classic
Dark mode work graphiteDark, classicDark
Presentation ocean, sunset, emerald
Brand showcase cyberpunk, forest
Print / PDF classic, mono

Design philosophy

Why themes instead of manual styling?

  • Prevents inconsistent colors
  • Avoids accessibility regressions
  • Ensures export quality
  • Keeps UI fast and predictable
  • Enables future theme updates without breaking diagrams

Themes are opinionated by design.

Summary

With Table Themes & Styles, you can:

  • Instantly restyle tables and edges
  • Maintain accessibility and contrast
  • Match light or dark environments
  • Create presentation-ready diagrams in seconds

Pick a theme. Focus on your data. Let the visuals take care of themselves.