PeerTube Theme: Tokyo Night

A dark theme for PeerTube based on the Tokyo Night color palette.

Replace git.example.com/YOURNAME above with your own Forgejo repo URL once it's pushed, and drop the npm badge if you don't plan to publish.

Tokyo Night Color Palette

The Tokyo Night palette is a set of colors originally designed for code editors, popular for its calm, low-contrast dark background paired with vivid, desaturated accents. This theme maps those colors to PeerTube's CSS variable system.

Base Colors

Tokyo Night Name	Hex	PeerTube Variables	Usage
Background	#1A1B26	--bg, --header-bg, --on-primary	Main page background, header, text on primary buttons
Background Highlight	#292E42	--border-secondary, --input-bg-in-secondary, --active-icon-bg, --input-border-color	Borders, input fields in secondary areas, active icon backgrounds
Foreground	#C0CAF5	--fg, --menu-fg, --input-fg, --textarea-fg	Body text, menu text, input/textarea text
Comment	#565F89	--input-placeholder-color, --secondary-icon-color, --bg-secondary-200	Placeholder text, muted icons, scrollbar hover

Accent Colors

Tokyo Night Name	Hex	PeerTube Variables	Usage
Blue	#7AA2F7	--primary, --support-btn-bg, --input-check-active-bg, --pt-player-big-play-bg	Primary actions, buttons, checkboxes, video player
Cyan	#7DCFFF	links (a selector), form labels, badges	Links, form labels, tag/badge text
Magenta	#BB9AF7	--support-btn-heart-bg, headings	Support button heart icon, h1/h2/h3 headings
Red	#F7768E	--red, --input-danger-bg	Error states, danger inputs
Green	#9ECE6A	--green	Success states

Derived Colors

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

Hex	Derived From	PeerTube Variables	Usage
#16161E	Background, darker	--menu-bg, --pt-player-overlay-secondary-bg	Sidebar, menu, player overlay
#292E42	Background, lighter	--input-bg, --textarea-bg, --alert-primary-bg	Input/textarea backgrounds, alert backgrounds
#4C6FB3	Blue, 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 Tokyo Night palette. This theme defines every gradient step explicitly for the following variable families:

• --fg (500 through 50)
• --bg-secondary-* (600 through 200 — there is no plain --bg-secondary, only the numbered steps)
• --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)
• --input-bg (600, 550)

Design Decisions

• Blue as primary: Tokyo Night's blue (#7AA2F7) is the signature interactive color of the palette and serves as the main color for buttons, focus states, and the video player.
• On-primary stays dark across all steps: Every --on-primary-* gradient is pinned to #1A1B26 (Tokyo Night Background) so text on blue buttons remains readable at all shades.
• Comment gray for placeholders and muted UI: Tokyo Night's Comment color (#565F89) is used for input placeholders, secondary icons, and scrollbar hover states rather than main interface elements.
• Functional red and green use Tokyo Night's own muted values: --red uses #F7768E and --green uses #9ECE6A — already desaturated in the source palette, which keeps validation states readable without clashing with the rest of the low-contrast UI.
• Cyan for form labels and badges: Form labels and tag/badge text use Tokyo Night Cyan (#7DCFFF) to visually distinguish them from body text and from the primary blue.
• Magenta for headings: Section headings (h1-h3) use Tokyo Night Magenta (#BB9AF7) to create clear visual hierarchy against the foreground text.
• Badges use Background Highlight: Tags and badges use #292E42 background with cyan text and Comment (#565F89) borders for a subtle, cohesive look.

Installation

From the PeerTube admin UI

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

From the CLI

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

From a local path

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

If PeerTube runs in Docker (e.g. via mash-playbook), --path must point to a location inside the container, since that's where the PeerTube process actually reads from:

docker cp peertube-theme-tokyonight peertube:/tmp/peertube-theme-tokyonight
peertube-cli plugins install --path /tmp/peertube-theme-tokyonight

Enabling the theme

Administration > Configuration > Basic > Theme > select Tokyo Night > Save.

Compatibility

• PeerTube >= 6.0.0

Releasing

Releases are triggered by pushing a git tag (v*) — that's what .forgejo/workflows/release.yml listens for. To avoid forgetting a step (bump package.json, commit, tag, push — in that exact order), use the helper script instead of doing it by hand:

./scripts/release.sh 0.0.3
# or: ./scripts/release.sh patch   (also accepts minor / major, like npm version)

This bumps the version in package.json, commits it, creates a matching vX.Y.Z tag, and pushes both — which kicks off the release workflow (npm publish + Forgejo release). Check progress under the repo's Actions tab.

License

MIT