musingfox/mermaid-theme

Mermaid Theme Configuration

Configure color themes for Mermaid diagrams by managing the MERMAID_COLOR_SCHEME environment variable.

Configuration Process

Step 1: Ask User to Choose Color Scheme

Use the AskUserQuestion tool with these options:

{
  "questions": [
    {
      "question": "Which color scheme would you like to use for Mermaid diagrams?",
      "header": "Color Scheme",
      "multiSelect": false,
      "options": [
        {"label": "Tokyo Night", "description": "Deep blue-purple tones, modern dark theme"},
        {"label": "Nord", "description": "Ice blue tones, arctic-inspired palette"},
        {"label": "Catppuccin Mocha", "description": "Warm purple tones, cozy dark theme"},
        {"label": "Catppuccin Latte", "description": "Warm tones, light theme with pastels"},
        {"label": "Dracula", "description": "Purple-pink tones, high contrast dark theme"},
        {"label": "GitHub Dark", "description": "Deep blue tones, familiar GitHub dark mode"},
        {"label": "GitHub Light", "description": "Light blue tones, clean GitHub light mode"},
        {"label": "Solarized Dark", "description": "Amber-blue tones, precision colors"},
        {"label": "Custom", "description": "Provide your own hex colors"}
      ]
    }
  ]
}

Step 2: Handle Selection

For built-in schemes: Map the label to scheme name (see references/color-schemes.md for mapping).

For "Custom": Ask for custom colors using AskUserQuestion:

{
  "questions": [
    {
      "question": "What primary color would you like? (hex format, e.g., #7aa2f7)",
      "header": "Primary Color",
      "multiSelect": false,
      "options": [
        {"label": "Blue (#7aa2f7)", "description": "Tokyo Night blue"},
        {"label": "Purple (#bb9af7)", "description": "Tokyo Night purple"},
        {"label": "Cyan (#88c0d0)", "description": "Nord cyan"},
        {"label": "Green (#a6e3a1)", "description": "Catppuccin green"}
      ]
    }
  ]
}

Step 3: Write Configuration File

Use the Write tool to create ~/.mermaid-theme.sh:

#!/bin/sh
# Mermaid Theme Configuration
# Generated by mermaid-theme skill

export MERMAID_COLOR_SCHEME="<scheme-name>"

For custom colors, also export:

export MERMAID_PRIMARY_COLOR="<user-color>"
export MERMAID_SECONDARY_COLOR="<optional>"
export MERMAID_TEXT_COLOR="<optional>"

Step 4: Provide Loading Instructions

Theme saved to ~/.mermaid-theme.sh

To apply now:     source ~/.mermaid-theme.sh
To make permanent: add 'source ~/.mermaid-theme.sh' to your shell profile

Important Notes

• If ~/.mermaid-theme.sh already exists, ask if user wants to overwrite
• All themes use transparent background (works with light and dark terminals)
• Changes take effect for new diagrams immediately after sourcing
• If user provides invalid hex colors, ask for correct format (e.g., #7aa2f7)
• Compatible with both /diagram command and mermaid-display skill

References

• All color scheme values: references/color-schemes.md