markon supports multiple theme presets with dark/light modes. Custom themes can be created using CSS variables.

Visit /themes to preview all available themes side-by-side in both dark and light modes. This helps you choose the perfect theme before applying it in settings.

The theme selection dialog shows 4 preview colors for each theme:

• --brand: Primary brand color (buttons, highlights)
• --accent: Accent color (links, interactive elements)
• --primary: Primary UI color
• --secondary: Secondary UI color

Themes are defined using CSS custom properties. All available variables:

Base colors:

• --bg: Background color
• --bg-light: Light background (panels, cards)
• --text: Text color

Main colors:

• --brand: Brand/primary action color
• --accent: Accent/interactive color
• --primary: Primary UI color
• --secondary: Secondary UI color

Syntax highlighting:

• --comment: Code comments
• --meta: Metadata/imports
• --operator: Operators
• --keyword: Keywords
• --regex: Regular expressions
• --property: Object properties
• --string: Strings
• --literal: Literals/numbers
• --hint: Hints/tooltips

Status colors:

• --success: Success indicators
• --warning: Warning indicators
• --info: Info indicators
• --error: Error indicators

Define themes in src/themes.css using this structure:

html[data-theme="panda"][data-mode="dark"] {
  --bg: #1a0f1f;
  --bg-light: #2d1a2d;
  --text: #f0f0e8;
  --brand: #ff1100;
  --accent: #8866ff;
  --primary: #bb66ff;
  --secondary: #22aa88;
  --comment: #bbbbbb;
  --meta: #ff1100;
  --operator: #bb88ee;
  --keyword: #ff88bb;
  --regex: #ff99cc;
  --property: #4488ff;
  --string: #22aa88;
  --literal: #ffbb66;
  --hint: #8866dd;

  --success: #22bb11;
  --warning: #ffaa00;
  --info: #1199cc;
  --error: #ff1100;
}

html[data-theme="panda"][data-mode="light"] {
  --bg: #f5f5f0;
  --bg-light: #ffffff;
  --text: #1a1a1a;
  --brand: #d73a49;
  --accent: #0366d6;
  --primary: #8b5cf6;
  --secondary: #28a745;
  --comment: #6a737d;
  --meta: #6f42c1;
  --operator: #0366d6;
  --keyword: #d73a49;
  --regex: #e36209;
  --property: #0366d6;
  --string: #032f62;
  --literal: #6f42c1;
  --hint: #28a745;

  --success: #22bb11;
  --warning: #ffaa00;
  --info: #1199cc;
  --error: #cc6600;
}

Themes are automatically detected and appear in the settings dialog. Both dark and light modes should be defined for each theme.