CraftingStudioPro Themes

Eleven themes for Visual Studio Code, built from a single design system rather than assembled one at a time. They share a semantic colour contract, so switching between them changes the mood of your editor without changing what anything means: keywords stay keywords, types stay types, and comments stay legible.

Themes

Theme	Character
Tokyo Night	Indigo night with restrained neon — violet keywords, blue structure
Deep Ocean	Deep water blues, saturation capped for long sessions
Night Owl	Deep navy, violet control flow, warm literals and teal structure
Midnight	Near black, the highest text contrast in the set, almost no colour in the chrome
Aurora	Green and violet given equal weight over a cold sky
Cyberpunk	Pink, cyan and violet at full voltage
Obsidian	Charcoal and restraint — every hue at a third of the usual saturation
Forest	Deep green with emerald and teal, water blue and clay to keep it readable
Crimson	Warm dark red and amber, with one deliberate cold anchor for types
Arctic	A cold dark theme: blue-grey slate, pale ice accents
Pure Light	A neutral white workspace with a real palette behind it — not a washed-out dark theme

Ten dark, one light. All eleven register as separate entries in the theme picker.

Screenshots

Tokyo Night

Deep Ocean

Night Owl

Midnight

Cyberpunk

Aurora Aurora

Obsidian

Forest Forest

Crimson Crimson

Arctic Arctic

Pure Light

Features

One semantic contract across eleven palettes. Each theme defines six accent hues, and each hue always carries the same meaning — structure, intent, literal data, scalar values, shape, markup identity. Learn the system once in Tokyo Night and Crimson reads the same way on your first day with it.

Contrast is enforced, not eyeballed. Every palette is compiled through a contrast gate before it ships. Body text clears 6.5:1, primary text 7:1, comments and every syntax colour 4.5:1, and all sixteen ANSI terminal colours 4.5:1 against the terminal background. A colour that misses its floor is lifted along the lightness axis — hue and saturation intact — rather than shipped. The build fails if the shipped value is still short.

784 UI colours per theme. Not just the editor: peek views, merge conflict headers, the settings editor, notebooks, testing coverage gutters, SCM graph lanes, inline chat, the command centre, sticky scroll, and the six-level bracket pair and indent guide ramps. Nothing falls back to the VS Code default and clashes.

Semantic highlighting on by default, with over sixty semantic token mappings alongside 107 TextMate rules — so a readonly property, a default-library type and a declared function each read differently when the language server can tell them apart.

Italics used sparingly and on purpose: control flow, parameters, comments, decorators and this. Nothing else.

Installation

From the Extensions view (Ctrl+Shift+X / Cmd+Shift+X), search for CraftingStudioPro Themes and click Install.

Or from the command line:

code --install-extension craftingstudiopro.csp-themes

Or from the Quick Open bar (Ctrl+P / Cmd+P):

ext install craftingstudiopro.csp-themes

Theme Selection

Press Ctrl+K Ctrl+T (Cmd+K Cmd+T on macOS) and pick any entry beginning with CraftingStudioPro.

To pin one in your settings:

{
  "workbench.colorTheme": "CraftingStudioPro Tokyo Night"
}

To follow your operating system's light/dark preference:

{
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "CraftingStudioPro Midnight",
  "workbench.preferredLightColorTheme": "CraftingStudioPro Pure Light"
}

Recommended Settings

These are not required — the themes are designed to look right with stock settings — but they are what the screenshots above use.

{
  // Semantic highlighting is what separates a readonly field from a plain one.
  "editor.semanticHighlighting.enabled": true,

  // The palettes ship a six-colour bracket ramp; this is what surfaces it.
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Comments and control flow are italic by design.
  "editor.fontFamily": "'Cascadia Code', 'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 13,
  "editor.lineHeight": 1.6,

  // The chrome is tuned for a quiet, low-border workbench.
  "workbench.editor.tabSizing": "shrink",
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.renderCharacters": false
}

Pair with CraftingStudioPro Developer Icons for a matching file icon theme:

{
  "workbench.iconTheme": "craftingstudiopro-icons"
}

Supported Languages

Syntax rules are tuned and visually checked for:

JavaScript · TypeScript · JSX · TSX · Python · Go · Rust · Java · Kotlin · Swift · PHP · C · C++ · C# · Ruby · Dart · Lua · R · Shell · Bash · PowerShell · HTML · CSS · SCSS · Sass · Less · JSON · JSONC · YAML · XML · TOML · SQL · GraphQL · Prisma · Markdown · MDX · Dockerfile · Makefile · Terraform · Nix · INI · diff

Every language falls back cleanly: the rules are layered from generic scopes to language-specific ones, so an unlisted grammar still gets sensible keyword, string, comment and number colours.

Feedback & Issues

Found a scope that reads wrong, or a surface that falls back to a default colour? That is a bug, and it is fixable in one place.

Issues: https://github.com/DevVoxelv2/craftingstudiopro-vscode/issues
Discussions: https://github.com/DevVoxelv2/craftingstudiopro-vscode/discussions
Website: https://craftingstudiopro.dev

When reporting a colour problem, Developer: Inspect Editor Tokens and Scopes from the command palette gives the exact scope — pasting that makes the fix immediate.

CraftingStudioPro Themes