A VS Code theme
by CN-DESIGN
Meaning by hue.
Never by brightness.
Count Darcula takes Dracula's hues and One Dark's discipline, then does the thing neither does: it pins every syntax colour to one perceptual lightness. Nothing outshouts its neighbour, the eye stops re-adapting every few characters, and hour nine feels like hour two.
across syntax
contrast
below AA
per variant
The argument
Both parents get one thing right
and one thing wrong.
One Dark is calm — low chroma, restrained, easy to sit in for hours — but its foreground is dim and its red lands under WCAG AA. Dracula has character nobody mistakes for anything else, but its palette spans 23.5 L*, so a single line of code flickers between near-white yellow and mid-tone red.
Count Darcula pins all eight to L* 76 — a spread of one tenth of a perceptual step, and a contrast band 6.19 to 6.87:1.
The palette
Eight hues, one lightness.
Each hue is a deliberate blend of the two parents, generated at L* 76 with per-hue chroma tuned so none looks louder than the others. Click any swatch to copy its hex.
The neutral ramp
Twelve steps on a single hue — 272°, midway between One Dark's 264° and Dracula's 277°. Every surface in the editor is one of these.
Colour means one thing everywhere
Learn it once and every file reads the same way — TypeScript, Rust, Python, YAML, CSS. Your own variables stay the default foreground, and deliberately the quietest thing on screen.
The variants
Three rooms in the same castle.
The same eight hues, re-derived three times. Pick one to wear the whole page in it — every colour you see below is the colour the extension actually ships.
Accessibility
Measured twice, then shipped.
A swatch that passes on the canvas can still fail inside a widget or on a filled badge, and a palette check would never see it. So every foreground key in the built JSON is re-measured against the surface it actually renders on, compositing alpha on both sides. The build fails if anything drops below AA.
$ npm test ✓ all 51 palette colours meet WCAG AA (>= 4.5:1) syntax band: contrast 6.19–6.87:1 (spread 0.68) lightness: 75.9–76.1 L* (spread 0.1) variant measured fails Count Darcula 221 0 Count Darcula Nocturne 221 0 Count Darcula Daylight 221 0 ✓ 663 keys measured, 0 below threshold
Not everything is held to the same bar
| Tier | What | Required |
|---|---|---|
| Body text | Editor, lists, tabs, terminal, menus, widgets | 4.5:1 |
| Icons & controls | Fold chevrons, breakpoints, cursors, brackets | 3:1 |
| De-emphasised | Disabled, inactive, placeholders, inline suggestions | reported |
| Decoration | Scrollbar marks, indent guides, rules, sliders | — |
The de-emphasised tier is where honesty matters, so the audit prints all 22 of them with measured ratios rather than quietly excluding them. Comments are deliberately not in that tier — they sit at 4.60:1, above AA. A comment nobody can read is a comment nobody maintains; the recession comes from lower chroma and italics, not from making it dim.
Battery
Nocturne turns most of
the screen off.
On an OLED panel each subpixel emits its own light, so panel power follows the image. Using the standard per-channel model — blue weighted 1.56× green, because blue emitters are the least efficient — applied to a modelled full-screen VS Code window:
src/power.js, and you are invited to disagree with it.
Install
Two ways in, about a minute.
Count Darcula isn't on any marketplace — it installs by hand. A colour theme is purely declarative, so any editor that renders the VS Code workbench renders this one identically. Pick your editor and your platform; every command below rewrites itself.
Clone it and check it
No dependencies, nothing to install — the test runner is plain Node.
git clone https://github.com/ChrisNicholson30/Count-Darcula-Theme.git cd Count-Darcula-Theme npm test # validate + audit
Link it — best if you want updates
Symlink the clone into ~/.vscode/extensions.
A git pull then brings you any changes.
ln -s "$PWD" ~/.vscode/extensions/count-darcula
Or package a VSIX — best for another machine
Writes a ~120 KB file you can carry anywhere. Or use Extensions ▸ ⋯ ▸ Install from VSIX… in the UI.
npm run package # writes count-darcula-1.0.1.vsix code --install-extension count-darcula-1.0.1.vsix
If code isn't on your PATH,
run Shell Command: Install 'code' command
from the Command Palette.
Reload, then pick a variant
Run Developer: Reload Window, then open the theme picker.
Ctrl + K then Ctrl + T — or ⌘ K ⌘ T on macOS — and choose Count Darcula, Count Darcula Nocturne or Count Darcula Daylight.
Where each editor keeps its extensions
| Editor | Binary | Extensions folder |
|---|
One caveat on the forks: they add chrome VS Code doesn't have — Cursor's AI pane and
inline-edit widget, for instance. Where those reuse standard VS Code colour tokens they're
themed (this sets inlineChat.*, chat.*
and editorGhostText.* among the 687), but any surface a fork
invents outside that vocabulary falls back to its own dark defaults. The editor, terminal,
side bar, tabs and status bar are exact.
Follow the system
{
"workbench.preferredDarkColorTheme": "Count Darcula",
"workbench.preferredLightColorTheme": "Count Darcula Daylight",
"window.autoDetectColorScheme": true
}
The setup it was designed against
{
"editor.fontFamily": "JetBrains Mono, SF Mono, Menlo, monospace",
"editor.fontSize": 13.5,
"editor.lineHeight": 1.6,
"editor.semanticHighlighting.enabled": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
// the ANSI set is already >= 4.5:1 — let it through
"terminal.integrated.minimumContrastRatio": 1
}
Want italic keywords after all
Italics ship only where slant carries information colour cannot — comments, parameters,
this, type parameters, HTML attributes. Not on keywords: at
13px, slanted keywords on every other line are exactly the kind of low-grade friction
that adds up over a day. Disagree in one snippet.
{
"editor.tokenColorCustomizations": {
"[Count Darcula*]": {
"textMateRules": [
{ "scope": ["keyword", "storage"], "settings": { "fontStyle": "italic" } }
]
}
}
}