mauvehed/peertube-dracula-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions
No description
20 commits 1 branch 7 tags 1.3 MiB
  • CSS 100%
Find a file
Exact
mauvehed 19805f4fc3
All checks were successful
CI / validate (push) Successful in 14s
Details
ci: add package size guard and PeerTube variable compatibility check 
Add CI badge to README, a 50KB package size limit check to catch
accidental large file inclusion, and a PeerTube CSS variable
compatibility check that warns when theme variables are missing
from PeerTube's upstream SCSS source.
2026-03-12 16:07:30 -05:00
.forgejo/workflows ci: add package size guard and PeerTube variable compatibility check 2026-03-12 16:07:30 -05:00
assets feat: add cyan labels, pink headings, styled badges, update alerts and screenshot 2026-03-12 08:52:41 -05:00
.npmignore ci: add validation workflow, npmignore, and release version check 2026-03-12 10:32:13 -05:00
LICENSE feat: initial peertube dracula theme 2026-03-11 22:40:23 -05:00
package.json chore: bump version to 0.0.7 2026-03-12 09:37:12 -05:00
peertube-theme-dracula.png feat: add cyan labels, pink headings, styled badges, update alerts and screenshot 2026-03-12 08:52:41 -05:00
README.md ci: add package size guard and PeerTube variable compatibility check 2026-03-12 16:07:30 -05:00

README.md

PeerTube Theme: Dracula

CI npm license

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

PeerTube Dracula Theme

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