A VS Code theme that looks like PyCharm stayed up all night.
Deep dark canvas. Floating glass panels. Accent-lit selections. Warm syntax.
Every panel floats. Every border catches light from the top-left. Every selected item glows with #548af7. Nothing is flat. Nothing is noisy.
Canvas #121216 ████ near-black void behind all panels
Surface #181a1d ████ panel background, slightly lifted
Accent #548af7 ████ selections, active tabs, focus rings
| Font | Used for |
|---|---|
| IBM Plex Mono | Editor |
| FiraCode Nerd Font Mono | Terminal |
| Bear Sans UI | UI chrome, tabs, sidebar |
Floating panels
- Sidebar, editor, terminal, right sidebar — each is an independent glass island
- Directional light simulation:
rgba(255,255,255,0.1)top border,rgba(255,255,255,0.02)bottom 24pxrounded corners on all major panels6pxgap between panels, showing the canvas beneath
Activity bar
- Pill-shaped container with glass inset shadow
- Active icon: accent-tinted circular indicator — no default VS Code line indicator
28pxicons for clarity at any DPI- Badge counters scaled to
0.8and pinned top-right
Tabs
- Active tab:
#548af7indicator line at top — JetBrains-style - Close button invisible until hover, fades in smoothly
- Bear Sans UI font across all tabs
- No tab borders — tabs separated by subtle box-shadows only
Sidebar / File tree
- Selected item: blue left-border accent + subtle gradient background
- Focused + selected: stronger accent, full
#548af7left bar - Hover: soft gradient, no jarring color flash
- All rows:
6pxrounded,4pxhorizontal margins
Everything else
- Command palette — glass borders, deep shadow, accent-tinted focused row
- Breadcrumbs — hidden until hover, 400ms fade
- Status bar — dimmed text, brightens on hover
- Minimap — 60% opacity, full on hover
- Scrollbars — pill-shaped thumbs with opacity transition
- File icons — color-matched glow via
drop-shadow - Notifications / dialogs —
14pxrounded, glass borders - Syntax — warm highlights for JS/TS, Python, Go, Rust, HTML/CSS, JSON, YAML, Markdown
Installs the theme, Custom UI Style extension, Bear Sans UI fonts, and merges settings automatically.
macOS / Linux
curl -fsSL https://raw.githubusercontent.com/ndugram/ndu-dark/main/bootstrap.sh | bashWindows (PowerShell)
irm https://raw.githubusercontent.com/ndugram/ndu-dark/main/bootstrap.ps1 | iexgit clone https://github.com/ndugram/ndu-dark.git
cd ndu-dark
./install.sh # macOS / Linux
# .\install.ps1 # WindowsThe script does:
- Copies extension to
~/.vscode/extensions/ndu-dark-1.1.0/ - Installs Custom UI Style via
code --install-extension - Installs Bear Sans UI fonts system-wide
- Deep-merges
settings.jsoninto your VS Code config (non-destructive) - Reloads VS Code
Install these manually before running the script:
| Font | Link |
|---|---|
| IBM Plex Mono | fonts.google.com/specimen/IBM+Plex+Mono |
| FiraCode Nerd Font | nerdfonts.com |
The floating panel look requires Custom UI Style. The settings.json in this repo provides all rules.
| Selector | Effect |
|---|---|
.monaco-workbench |
CSS variable definitions — edit here to retheme everything |
.part.sidebar |
Floating glass panel, rounded corners, accent selection |
.part.editor |
Floating glass panel, accent tab top indicator |
.part.activitybar |
Pill container, accent active icon |
.part.panel.bottom |
Floating terminal/output panel |
.part.auxiliarybar |
Right sidebar, same glass style |
.quick-input-widget |
Command palette — glass, deep shadow |
.tabs-container |
Tab bar bottom border via background-image trick |
.tab.active |
#548af7 top indicator via box-shadow |
.monaco-breadcrumbs |
Hidden until hover |
.scrollbar .slider |
Pill shape, opacity transition |
All values in one place — ".monaco-workbench" block in settings.json:
"--islands-panel-radius": "24px"
"--islands-widget-radius": "14px"
"--islands-input-radius": "12px"
"--islands-item-radius": "6px"
"--islands-panel-gap": "6px"
"--islands-bg-canvas": "#121216"
"--islands-bg-surface": "#181a1d"
"--islands-tab-border": "#25262a"
"--islands-accent": "#548af7"Changes aren't taking effect
Cycle the extension:
Ctrl+Shift+P→Custom UI Style: Disable→ Reload VS CodeCtrl+Shift+P→Custom UI Style: Enable→ Reload VS Code
"Your VS Code installation appears to be corrupt"
Expected. Custom UI Style patches workbench.html — VS Code detects the checksum mismatch and warns you. Click Don't Show Again. This is cosmetic only; nothing is actually broken.
Conflict with Custom CSS and JS Loader
If you previously used be5invis.vscode-custom-css, it may have injected CSS directly into workbench.html that persists after disabling. Reinstall VS Code to get a clean workbench.html, then use only Custom UI Style.
Font not rendering
IBM Plex Mono and FiraCode Nerd Font must be installed at OS level — not just as VS Code settings. The install script checks for them and prints a reminder if missing.
- Fork → branch → change
- Test in VS Code with Custom UI Style enabled
- PR with a before/after screenshot if it's a visual change
Easiest place to start: adjust CSS variables in settings.json to experiment with spacing, colors, radii.
Inspired by JetBrains New UI — PyCharm, IntelliJ.
MIT © ndugram