Themes

Dev Reel includes 4 carefully designed professional themes. Each theme defines a complete color palette for background, text, accent, and states (success, error, warning, info).

promise-inc (default)

Modern dark theme with cyan accents. Clean and professional look, ideal for most projects.

yaml

theme: promise-inc

Color palette:

typescript

{
  background: "#0f1419",      // Dark blue-grey
  backgroundAlt: "#1a1f2e",   // Slightly lighter
  foreground: "#e6edf3",      // Light grey-blue text
  foregroundDim: "#8b949e",   // Dimmed text
  accent: "#00d4ff",          // Cyan
  accentDim: "#0891b2",       // Darker cyan
  success: "#3fb950",         // Green
  error: "#f85149",           // Red
  warning: "#d29922",         // Orange-yellow
  info: "#58a6ff",            // Blue
  border: "#30363d",          // Subtle border
  shadow: "rgba(0, 0, 0, 0.5)" // Shadow overlay
}

This is the default theme. If you don't specify a theme, promise-inc will be used.

dracula

The popular Dracula theme with purple and pink tones. Perfect for adding personality and style.

yaml

theme: dracula

Color palette:

typescript

{
  background: "#282a36",      // Dark purple-grey
  backgroundAlt: "#44475a",   // Selection background
  foreground: "#f8f8f2",      // Almost white
  foregroundDim: "#6272a4",   // Comment grey-blue
  accent: "#bd93f9",          // Purple
  accentDim: "#9580c9",       // Darker purple
  success: "#50fa7b",         // Bright green
  error: "#ff5555",           // Red
  warning: "#ffb86c",         // Orange
  info: "#8be9fd",            // Cyan
  border: "#44475a",          // Same as alt bg
  shadow: "rgba(0, 0, 0, 0.6)"
}

Use case: creative projects, visual demos, landing pages

nord

Arctic-inspired theme. Cool blues and frost. Clean and minimalist.

yaml

theme: nord

Color palette:

typescript

{
  background: "#2e3440",      // Polar night
  backgroundAlt: "#3b4252",   // Lighter polar
  foreground: "#eceff4",      // Snow storm white
  foregroundDim: "#d8dee9",   // Dimmed snow
  accent: "#88c0d0",          // Frost cyan
  accentDim: "#5e81ac",       // Deeper frost blue
  success: "#a3be8c",         // Green
  error: "#bf616a",           // Red
  warning: "#ebcb8b",         // Yellow
  info: "#81a1c1",            // Blue
  border: "#4c566a",          // Border grey
  shadow: "rgba(0, 0, 0, 0.4)"
}

Use case: technical documentation, enterprise projects, design systems

catppuccin-mocha

Warm dark theme from Catppuccin. Soft pastel tones on a cozy dark background.

yaml

theme: catppuccin-mocha

Color palette:

typescript

{
  background: "#1e1e2e",      // Base
  backgroundAlt: "#313244",   // Surface 0
  foreground: "#cdd6f4",      // Text
  foregroundDim: "#a6adc8",   // Subtext 0
  accent: "#89b4fa",          // Blue
  accentDim: "#74c7ec",       // Sapphire
  success: "#a6e3a1",         // Green
  error: "#f38ba8",           // Red
  warning: "#f9e2af",         // Yellow
  info: "#94e2d5",            // Teal
  border: "#45475a",          // Surface 1
  shadow: "rgba(0, 0, 0, 0.5)"
}

Use case: personal projects, stylish READMEs, open-source communities

Choosing a theme

Consider these factors when choosing a theme:

Project visual identity: match your brand colors
Target audience: more sober themes (nord) for enterprise, more vibrant (dracula) for community
Context: GitHub dark mode favors all themes, light mode may vary
Personal preference: all themes are readable and professional

Visual comparison

Same content rendered in all themes:

markdown

```dev-reel
title: theme-comparison-promise
theme: promise-inc
frame: terminal

$ npm install
✔ Installed in 1.2s
⚠ Warning: peer dep
```

```dev-reel
title: theme-comparison-dracula
theme: dracula
frame: terminal

$ npm install
✔ Installed in 1.2s
⚠ Warning: peer dep
```

```dev-reel
title: theme-comparison-nord
theme: nord
frame: terminal

$ npm install
✔ Installed in 1.2s
⚠ Warning: peer dep
```

```dev-reel
title: theme-comparison-catppuccin
theme: catppuccin-mocha
frame: terminal

$ npm install
✔ Installed in 1.2s
⚠ Warning: peer dep
```

TypeScript interface

Complete theme structure for reference or creating custom themes:

typescript

interface ThemeColors {
  background: string;      // Main background color
  backgroundAlt: string;   // Alternative background (hover, selection)
  foreground: string;      // Main text color
  foregroundDim: string;   // Dimmed text (comments, hints)
  accent: string;          // Accent color (commands, links)
  accentDim: string;       // Darker accent
  success: string;         // Green for ✔
  error: string;           // Red for ✖
  warning: string;         // Yellow for ⚠
  info: string;            // Blue for ℹ
  border: string;          // Border color
  shadow: string;          // Shadow (rgba)
}

type ThemeName = "promise-inc" | "dracula" | "nord" | "catppuccin-mocha";

Currently it's not possible to create custom themes via configuration. The 4 included themes cover most use cases. Support for custom themes may come in future versions.

Usage tips

Test your README in both GitHub dark and light mode to ensure readability
Use the same theme across all reels in the same README for visual consistency
Darker themes (promise-inc, nord) tend to work better in GitHub light mode
Consider creating a sample reel in each theme and choosing your favorite
Accent colors are used for commands ($) and can impact visual hierarchy

Block Syntax Frames