PeerTube Theme: Dracula

A dark theme for PeerTube based on the Dracula color palette.

Dracula Color Palette

The Dracula specification defines a consistent set of colors used across 300+ apps and tools. This theme maps those colors to PeerTube's CSS variable system.

Base Colors

| Dracula Name | Hex | PeerTube Variables | Usage | |--------------|-----------|-------------------|-------| | Background | #282A36 | --bg, --header-bg, --on-primary | Main page background, header, text on primary buttons | | Current Line | #44475A | --border-secondary, --input-bg-in-secondary, --active-icon-bg, --input-border-color | Borders, input fields in secondary areas, active icon backgrounds | | Foreground | #F8F8F2 | --fg, --menu-fg, --input-fg, --textarea-fg | Body text, menu text, input/textarea text | | Comment | #6272A4 | --input-placeholder-color, --secondary-icon-color, --bg-secondary-200 | Placeholder text, muted icons, scrollbar hover |

Accent Colors

| Dracula Name | Hex | PeerTube Variables | Usage | |--------------|-----------|-------------------|-------| | Purple | #BD93F9 | --primary, --support-btn-bg, --input-check-active-bg, --pt-player-big-play-bg | Primary actions, buttons, checkboxes, video player | | Cyan | #8BE9FD | --link-color, form labels, badges | Links, form labels, tag/badge text | | Pink | #FF79C6 | --support-btn-heart-bg, headings | Support button heart icon, h1/h2/h3 headings | | Red | #DE5735 | --red, --input-danger-bg | Error states, danger inputs | | Green | #089108 | --green | Success states |

Derived Colors

Some PeerTube variables don't map directly to a Dracula palette color but are derived from them to maintain visual consistency:

| Hex | Derived From | PeerTube Variables | Usage | |-----------|--------------------|--------------------|-------| | #21222C | Background, darker | --bg-secondary, --menu-bg, --pt-player-overlay-secondary-bg | Sidebar, menu, player overlay | | #343746 | Background, lighter | --input-bg, --textarea-bg, --alert-primary-bg | Input/textarea backgrounds, alert backgrounds | | #a07de0 | Purple, muted | --border-primary, --primary-600 | Primary borders |

Gradient Steps

PeerTube auto-generates color gradient steps (e.g. --primary-450, --bg-secondary-300) from base variables. If left to auto-generate, the computed colors clash with the Dracula palette. This theme defines every gradient step explicitly for the following variable families:

• --fg (500 through 50)
• --bg-secondary (600 through 200)
• --primary (700 through 50)
• --on-primary (700 through 50)
• --header-bg (600 through 200)
• --header-fg (500 through 50)
• --menu-fg (600 through 50)
• --menu-bg (600 through 200)

Design Decisions

• Purple as primary: Dracula's purple (#BD93F9) is the most recognizable color in the palette and serves as the main interactive color for buttons, focus states, and the video player.
• On-primary stays dark across all steps: Every --on-primary-* gradient is pinned to #282A36 (Dracula Background) so text on purple buttons remains readable at all shades.
• Comment gray for placeholders and muted UI: Dracula's Comment color (#6272A4) is used for input placeholders, secondary icons, and scrollbar hover states rather than main interface elements.
• Functional red and green use muted values: --red uses #DE5735 and --green uses #089108 rather than Dracula's brighter #FF5555/#50FA7B for better readability in PeerTube's functional UI contexts (form validation, status indicators).
• Cyan for form labels and badges: Form labels and tag/badge text use Dracula Cyan (#8BE9FD) to visually distinguish them from body text.
• Pink for headings: Section headings (h1-h3) use Dracula Pink (#FF79C6) to create clear visual hierarchy against the foreground text.
• Badges use Current Line background: Tags and badges use #44475A background with cyan text and Comment (#6272A4) borders for a subtle, cohesive look.

Installation

From the PeerTube admin UI

Navigate to Administration > Plugins/Themes > Search and search for peertube-theme-dracula.

From the CLI

peertube-cli plugins install --npm-name peertube-theme-dracula

From a local path

peertube-cli plugins install --path /path/to/peertube-dracula-theme

Compatibility

• PeerTube >= 6.0.0

License

MIT