Cyberpunk Dark — Visual Studio Code Theme
A dark, neon-drenched theme family inspired by the cyberpunk visual canon —
synthwave, vaporwave, Tokyo Night, The Matrix, Blade Runner,
Ghost in the Shell, and Cyberpunk 2077 Night City.
Design principle: The token-to-slot mapping is identical across all 12 variants
(keywords always lead, functions/types always lean on secondary, numbers/constants
always carry accent). What changes is the palette plugged into each slot — and
how heavily each variant lets the UI chrome lean into its aesthetic.
12 variations of the cyberpunk palette
Every variant is a remix of the same five slots — primary, secondary,
accent, string, parameter — over a dark background. Every variant
meets WCAG AA (4.5:1) on every syntax token; High Contrast is mostly AAA.
| Variant |
UI lean |
Primary |
Secondary |
Accent |
Vibe |
| Cyberpunk Dark |
neutral |
#FF2A6D |
#05D9E8 |
#F9F002 |
Canonical pink + cyan + electric-yellow |
| Neon Pink |
tinted |
#FF1493 |
#FF8FCB |
#00FFE5 |
Pink-on-pink |
| Neon Cyan |
tinted |
#00F0FF |
#7EE8FA |
#FF1493 |
Cyan-on-cyan |
| Matrix |
neon |
#00FF41 |
#7AFFB2 |
#C8FF00 |
Phosphor green terminal vibe |
| Neon Purple |
tinted |
#BD00FF |
#D580FF |
#00FFE5 |
Violet-dominant |
| Tokyo Night |
tinted |
#BB9AF7 |
#7AA2F7 |
#FF9E64 |
Cool lavender + blue over indigo |
| Synthwave |
neon |
#FF00FF |
#00FFFF |
#FFD319 |
80s magenta + cyan |
| Vaporwave |
neon |
#FF71CE |
#01CDFE |
#B967FF |
Pastel pink + cyan + lavender |
| Blade Runner |
neutral |
#FF6B1A |
#FFC857 |
#00BFFF |
Amber dystopia |
| Night City |
tinted |
#FCEE0A |
#FF0055 |
#00F0FF |
CP2077 yellow + red-pink + cyan |
| AMOLED |
neutral |
#FF2A6D |
#05D9E8 |
#F9F002 |
Classic palette over true #000000 |
| High Contrast |
neutral |
#FF4080 |
#5EEAFF |
#FFFF00 |
Boosted accents, white default-fg (AAA) |
Switch variants in Settings → Color Theme (or Ctrl+K Ctrl+T).
"UI lean" explained:
- neutral — chrome stays neutral cool-dark grayscale; the variant colors live in code only. Best for long sessions.
- tinted —
bgSurface / bgElevated pick up a subtle wash of the variant primary (≤10% saturation bump). Mildly atmospheric.
- neon — chrome leans hard into the aesthetic (deep purple/magenta backgrounds, neon active-tab underlines). Maximum cyberpunk; some prefer it for short focus blocks.
Syntax mapping (shared across all 12 variants)
| Token |
Color slot |
Keywords, control flow, storage, self/this/super |
primary |
| Functions, methods, class/type names, HTML attributes |
secondary |
| Numbers, booleans, constants, decorators, regex, lifetimes |
accent |
| String literals |
string |
| Function parameters, SCSS variables |
param (italic) |
| Comments |
muted gray |
| Doc comments (JSDoc, rustdoc, pydoc) |
doc-comment shade (italic) |
| Operators, punctuation |
subtle gray |
| Default text, variables, properties |
default gray |
The slot mapping is a contract: it never changes between variants, so muscle
memory for "pink ≈ keyword" transfers cleanly to "green ≈ keyword" in Matrix.
WCAG contrast — all variants
Each accent against its variant's editor background. Every value ≥ 4.5:1 (AA); ≥ 7.0:1 is AAA.
| Variant |
Primary |
Secondary |
Accent |
String |
Default FG |
Comments |
| Cyberpunk Dark |
5.1 |
13.5 |
17.0 |
14.6 |
13.3 |
4.7 |
| Neon Pink |
5.5 |
8.8 |
14.9 |
14.4 |
13.1 |
4.7 |
| Neon Cyan |
13.6 |
11.5 |
5.4 |
14.5 |
13.2 |
4.7 |
| Matrix |
17.4 |
14.0 |
17.2 |
13.7 |
13.9 |
4.7 |
| Neon Purple |
5.5 |
9.0 |
14.6 |
14.2 |
12.8 |
4.7 |
| Tokyo Night |
8.6 |
7.7 |
7.7 |
8.7 |
11.4 |
4.6 |
| Synthwave |
6.6 |
13.7 |
11.6 |
7.2 |
11.7 |
4.6 |
| Vaporwave |
8.4 |
13.0 |
6.5 |
14.5 |
12.0 |
4.6 |
| Blade Runner |
6.5 |
12.1 |
7.7 |
11.3 |
13.6 |
4.8 |
| Night City |
16.6 |
5.1 |
13.6 |
14.3 |
12.9 |
4.7 |
| AMOLED |
5.5 |
14.5 |
18.3 |
15.7 |
14.3 |
5.1 |
| High Contrast |
8.0 |
12.4 |
19.5 |
18.4 |
19.5 |
7.6 |
Diagnostic colors (error/warning/info/success) stay conventional red/yellow/blue/green
across all variants — meaning is preserved for color-blind users (deuteranopia, protanopia).
Language Coverage
Full TextMate scope coverage plus semanticTokenColors for:
TypeScript · JavaScript · JSX/TSX · Python · Go · Rust · Java · C · C++ · C# · Ruby · PHP ·
HTML · CSS · SCSS · Markdown · JSON · YAML · Shell/Bash · SQL · Dockerfile
Install
From VSIX (local)
cd vscode-cyberpunk-dark
.\package.ps1 # builds cyberpunk-dark-0.1.0.vsix
code --install-extension cyberpunk-dark-0.1.0.vsix
Then Ctrl+K Ctrl+T and pick any of the 12 variants.
From VSCode Marketplace
Search "Cyberpunk Dark" in the Extensions panel.
Development
Open this folder in VSCode and press F5 to launch an Extension Development Host
with all 12 variants available.
Credits
- Cyberpunk palette inspirations — synthwave/vaporwave 1980s poster art; Tokyo Night
(folke/tokyonight.nvim); Blade Runner (Ridley Scott, 1982); The Matrix (Wachowskis, 1999);
Ghost in the Shell (Mamoru Oshii, 1995); Cyberpunk 2077 (CD Projekt Red, 2020).
- Structural inspiration — One Dark Pro (VSCode) for workbench color organization;
Synthwave '84 (Robb Owen) for the canonical synthwave palette.
- Author — Jose (aneudy2000@gmail.com)
- License — MIT
Screenshots
Install the theme and open a TypeScript or Python file in each variant to see the palette in action.
(Screenshot placeholder — add screenshots/<variant>.png and reference here before publishing.)
