Jinx's Room 🔮
A VS Code color theme inspired by the chaotic, neon-soaked world of Arcane — specifically Jinx's hideout in the undercity. Deep void blacks, glowing teal machinery, electric pinks, and violet shimmer tech, all filtered through the lens of someone who paints on the walls and rewires everything.
Preview
"Paint it. Break it. Make it yours."
The theme draws from the reference art of Jinx's tower hideout — a circular workshop suspended in dark water, lit by glowing contraptions and covered in chalk drawings. That atmosphere lives in every color choice here.
Core palette:
| Color |
Hex |
Used for |
| 🌑 Void black |
#0f0f17 |
Editor & UI background |
| 🩷 Hot pink |
#fe98ff |
Default text |
| 🩵 Neon teal |
#14f2ae |
Variables, cursor, tags |
| ⚡ Electric cyan |
#5fe9ff |
Functions, icons |
| 🌸 Magenta-pink |
#e873ae |
Keywords, storage |
| 💜 Shimmer purple |
#845df2 |
Classes, types, modules |
| 🌸 Soft lilac |
#ffb5fa |
Strings |
| 🌿 Mint |
#76f4d0 |
Constants, numbers |
| 🌊 Deep teal |
#18474f |
Active tabs, status bar |
| 🟣 Muted purple |
#7a5c7a |
Comments (italic) |
Features
- Fully unified chrome — activity bar, sidebar, tab bar, title bar, and status bar all share the same deep
#0f0f17 background so the entire window feels like one environment
- Semantic highlighting enabled — variables, constants, and default library members each get their own distinct color layer on top of syntax highlighting
- Web dev focused — extra attention given to HTML, CSS/SCSS, JS, TS, JSX, and TSX token scopes
- Italic comments & attributes — comments and HTML/JSX attribute names render in italic for a softer visual distinction
- Themed hover widgets — autocomplete and hover popups use a dark teal background to match the overall aesthetic
- Broad language support — includes fine-tuned scopes for JavaScript, TypeScript, Python, Rust, Java, PHP, Go, C/C++, C#, JSON, YAML, Markdown, and more
Installation
From the VS Code Marketplace
(coming soon)
Manual install
- Download or clone this repository
- Copy the theme folder into your VS Code extensions directory:
- macOS / Linux:
~/.vscode/extensions/
- Windows:
%USERPROFILE%\.vscode\extensions\
- Restart VS Code
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Run Preferences: Color Theme
- Select Jinx's Room
Recommended Settings
This theme pairs well with the following VS Code settings:
{
// A font with ligatures complements the neon aesthetic
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.7,
// Subtle bracket colorization that doesn't fight the theme
"editor.bracketPairColorization.enabled": true,
// The cursor glow reads better with a softer blink
"editor.cursorBlinking": "phase",
"editor.cursorStyle": "line"
}
Color Reference
Syntax tokens
| Token |
Color |
Keywords (import, const, return…) |
#e873ae |
| Functions & methods |
#5fe9ff |
| Variables |
#14f2ae |
| Constants & numbers |
#76f4d0 |
| Strings |
#ffb5fa |
| Classes & types |
#845df2 |
| Namespaces & modules |
#845df2 |
| Operators (arithmetic, comparison) |
#56b6c2 |
| Punctuation & brackets |
#fe98ff |
| HTML/JSX tags |
#14f2ae |
| HTML/JSX attributes |
#76f4d0 |
| CSS property names |
#fe98ff |
| CSS property values |
#76f4d0 |
| Comments |
#7a5c7a (italic) |
| RegExp |
#56b6c2 |
UI chrome
| Element |
Color |
| Editor & UI background |
#0f0f17 |
| Active tab / selection |
#18474f |
| Status bar |
#18474f |
| Cursor |
#14f2ae |
| Error squiggles |
#ff4f6b |
| Warnings |
#cca700 |
| Primary button |
#d323d4 → hover #845df2 |
| Progress bar |
#14f2ae |
| Icons |
#5fe9ff |
| Links |
#845df2 |
| Hover widget background |
#133a41 |
Inspiration
The color choices are pulled directly from the Arcane concept art for Jinx's room in the undercity — the bioluminescent teal of the water and machinery, the purple shimmer of hextech devices, the hot pink of neon graffiti, and the deep near-black of the cave walls. If you've seen the show, you already know what this editor looks like.
Contributing
Found a token that looks off, or a language that's not quite right? Open an issue or a pull request. The theme JSON is a single file and the scope names are all labeled — it's easy to get into.
License
MIT — do whatever you want with it.
Made with too much caffeine and a very specific Arcane rewatch.
| |
