Sakura Nova
A cozy, elegant VS Code theme family inspired by cherry blossoms drifting through a soft cosmic night sky — candy pinks, dreamy pastels, and deep velvety purples. It's built to feel like a warm hug for late-night coding sessions: gentle on the eyes, playful in its accents, refined in its structure.
Sakura Pink (#FF5DA2) is the signature thread running through all five variants — it's always the cursor, the selection glow, the active tab border, and the badge/button color, so the family reads as one theme no matter which variant you're in.
Variants
| Variant |
Mood |
uiTheme |
| Sakura Nova Dark |
A quiet cosmic night, cherry blossoms glowing under moonlight |
vs-dark |
| Sakura Nova Dark Red |
The same night sky, with keywords recast in a warmer ember red |
vs-dark |
| Sakura Nova Dark Pro |
Dark Nova with a brighter rose accent and italicized variables throughout |
vs-dark |
| Sakura Nova Light |
A soft spring morning, pastel skies, blossoms in daylight |
vs |
| Sakura Nova Warm |
A candlelit, blanket-fort coding session with sepia-pink undertones |
vs-dark |
Dark Red and Dark Pro are accent variants built on the Dark base — same structure and backgrounds, different keyword and bracket treatment.
Preview
Color-accurate mockups generated straight from each theme's own values — not live VS Code captures. Swap in real screenshots any time by replacing the files in screenshots/.
Sakura Nova Dark
Sakura Nova Dark Red
Sakura Nova Dark Pro
Sakura Nova Light
Sakura Nova Warm
Installing it locally
This package isn't published to the Marketplace yet, so use one of these:
Option A — drop it in your extensions folder
- Copy the whole
sakura-nova folder into your VS Code extensions directory:
- macOS/Linux:
~/.vscode/extensions/
- Windows:
%USERPROFILE%\.vscode\extensions\
- Restart VS Code.
Ctrl/Cmd+K Ctrl/Cmd+T → pick Sakura Nova Dark / Dark Red / Dark Pro / Light / Warm.
Option B — install the prebuilt .vsix
A packaged sakura-nova-1.0.0.vsix ships alongside this README — just run:
code --install-extension sakura-nova-1.0.0.vsix
Option C — package it yourself
npm install -g @vscode/vsce
cd sakura-nova
vsce package
code --install-extension sakura-nova-1.0.0.vsix
Before publishing for real, update the publisher field in package.json (currently a placeholder) to your own Marketplace publisher ID, and swap the repository / bugs / homepage URLs to your actual repo.
Source palette
| Color |
Name |
Character |
#FF5DA2 |
Sakura Pink |
Primary accent — cursor, selection, signature thread |
#F02E6E |
Rose Punch |
Errors / tags — bold accent |
#1E1C31 |
Midnight Plum |
Panel background (dark) |
#F5C2E7 |
Cherry Blossom |
Variables (dark) |
#CBE3E7 |
Morning Mist |
Light-panel tint |
#100E23 |
Void Ink |
Editor background (dark) |
#F48FB1 |
Cotton Candy |
Variables (warm) |
#A1EFD3 |
Mint Dream |
Strings (dark) |
#FFE6B3 |
Vanilla Cream |
Warnings |
#91DDFF |
Sky Sorbet |
Functions (dark) |
#D4BFFF |
Lilac Fog |
Types/classes (dark) |
#87DFEB |
Aqua Frost |
Terminal cyan (dark) |
#F8F8F2 |
Cream White |
Foreground (dark) / background (light) |
#585273 |
Dusty Mauve |
Comments base tone |
#2CE592 |
Emerald Pop |
Success / git-added |
#FFB378 |
Peach Glow |
Numbers/constants |
#1DA0E2 |
Cerulean |
Info / git-modified |
#A742EA |
Orchid Violet |
Keywords (dark) |
#63F2F1 |
Turquoise Spark |
Attributes (dark) |
#8D91A8 |
Slate Lavender |
Comments (light) |
#F2608F |
Ember Bright |
Keywords (Dark Red) — the family's existing "bright red," reused for a cohesive accent |
Accessibility
Every foreground/background text pairing across all variants was checked against WCAG AA (4.5:1) using relative luminance, not eyeballed. Where a spec color fell short, it was nudged in HSL lightness (lightened on the dark backgrounds, darkened on the light one) until it cleared the bar, keeping its original hue — so "Peach Glow" stays peach, just a richer shade of it.
One deliberate exception: Sakura Nova Light's tag color uses Rose Punch (#F02E6E) unchanged, per spec, which measures 3.70:1 against the light background — it clears the large-text/UI-component AA threshold (3:1) but not the full body-text one (4.5:1). Tags are typically short, so this was kept as specified rather than deepened; swap in editorBracketHighlight-style deepening if you'd rather it match the rest.
The terminal's 16 ANSI colors follow the same rule: the base 8 target 4.5:1, and the "bright" 8 target at least 3:1 while staying visibly more saturated than their base counterparts.
Customization
All translucent overlays (selection, hover states, indent guides, diff backgrounds) are built as accent + alpha rather than flat colors, so nudging one hex in the colors block keeps the whole theme's glow consistent. Bracket pair colorization cycles through Orchid Violet → Sky Sorbet → Peach Glow → Turquoise Spark → Emerald Pop → Sakura Pink (per-variant equivalents) — reorder editorBracketHighlight.foreground1–6 in any theme file to change the cycle. Dark Red and Dark Pro apply the same cycle to editorBracketPairGuide.* as well, so the guides in the indent margin always match the bracket highlight colors.
