Skip to content

feat: add dark mode support for generated flow diagrams #4

@xiapeli

Description

@xiapeli

Summary

FlowMaster generates Mermaid diagrams with default (light) styling. Many developers use dark-themed editors and documentation sites. The generated diagrams should support a dark mode color scheme.

What needs to happen

  1. Define a dark mode color palette for diagram elements:
    • Node fill colors (dark backgrounds with light text)
    • Edge/arrow colors (visible on dark backgrounds)
    • Subgraph background colors
  2. Add a theme toggle instruction in the skill file (e.g., a parameter or flag for dark/light)
  3. Use Mermaid's built-in theming system where possible:
    • `%%{init: {"theme": "dark"}}%%` directive
    • Custom `themeVariables` for FlowMaster-specific styling
  4. Ensure all node types remain distinguishable in dark mode

Acceptance criteria

  • Diagrams render correctly on dark backgrounds (GitHub dark mode, VS Code dark themes)
  • All node type colors have sufficient contrast in dark mode
  • Light mode remains the default (no regression)
  • User can request dark mode via a clear instruction

Getting started

  1. Review Mermaid theming docs: https://mermaid.js.org/config/theming.html
  2. Test current FlowMaster output with `%%{init: {"theme": "dark"}}%%`
  3. Identify which node styles need color overrides

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions