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:

json

{
  "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:

json

{
  "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:

bash

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

export MERMAID_COLOR_SCHEME="<scheme-name>"

For custom colors, also export:

bash

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

Step 4: Provide Loading Instructions

code

Theme saved to ~/.mermaid-theme.sh

To apply now:     source ~/.mermaid-theme.sh
To make permanent: echo 'source ~/.mermaid-theme.sh' >> ~/.zshrc

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