Nightfox Themes for VSCode
A faithful port of the Nightfox theme
family (by EdenEast) to Visual Studio Code. Soft, warm palettes with careful
contrast — seven variants across dark and light.
Features
- All seven variants in one extension. Five dark (Nightfox, Duskfox, Nordfox,
Terafox, Carbonfox) and two light (Dayfox, Dawnfox). Install once, switch freely
from the theme picker.
- Workbench coverage, not just the editor. Around 320 UI colors per variant —
tabs, sidebar, status bar, peek view, the diff and merge editors, notifications,
quick pick, breadcrumbs, the debug console, testing icons, and symbol icons — so
the whole window is themed rather than falling back to defaults.
- Semantic highlighting for every standard token type. All 23 VS Code semantic
types plus the standard modifiers (readonly, deprecated, static, async…), with
extra rules for Go and Rust layered on top of the TextMate scopes.
- Per-variant terminal palettes. Each theme sets its own 16 ANSI colors so the
integrated terminal matches, base and bright.
- Generated from one source of truth. Every variant is built from a shared
palette file, so colors stay consistent and upstream palette changes are a
one-line edit — see How the colors are generated.
Variants
| Variant |
Mode |
Vibe |
| Nightfox |
dark |
The flagship — cool blue/teal |
| Duskfox |
dark |
Muted purples, rosé accents |
| Nordfox |
dark |
Nord-inspired, frosty blues |
| Terafox |
dark |
Deep teal earth-tones |
| Carbonfox |
dark |
Near-black, high-contrast (IBM Carbon) |
| Dayfox |
light |
Warm, low-glare daytime |
| Dawnfox |
light |
Soft rosé-pine light (Rosé Pine dawn) |
Installing
From the Marketplace
Search for Nightfox Themes for VSCode in the Extensions view (Ctrl+Shift+X)
and install.
Manually (from source)
- Clone this repo.
- Regenerate the theme files if you've edited the palette:
npm run build.
- Copy the folder into your VS Code extensions directory:
- macOS/Linux:
~/.vscode/extensions/
- Windows:
%USERPROFILE%\.vscode\extensions\
- Or package a
.vsix with vsce:
npm install -g @vscode/vsce
vsce package
code --install-extension nightfox-themes-for-vscode-0.1.0.vsix
Activating
Ctrl+K Ctrl+T (or Preferences: Color Theme) → pick any Nightfox variant.
Auto-switching with your system light/dark mode
VS Code can follow your OS appearance and swap between a light and a dark theme
automatically. Pick a Nightfox pair (e.g. Nightfox for dark, Dayfox for light) and
add this to your settings.json:
{
// Follow the OS appearance instead of a single fixed theme
"window.autoDetectColorScheme": true,
// Used when your system is in DARK mode
"workbench.preferredDarkColorTheme": "Nightfox",
// Used when your system is in LIGHT mode
"workbench.preferredLightColorTheme": "Dayfox"
}
Now the editor uses Nightfox at night and Dayfox during the day, tracking
your OS. Swap in any variant you like — for example Duskfox / Dawnfox, or
Carbonfox / Dayfox for maximum contrast.
On macOS, "Auto" appearance (System Settings → Appearance) drives the switch. On
Windows, it's Settings → Personalization → Colors. On Linux it follows your
desktop's GTK/Qt dark-mode preference where VS Code can detect it.
Turning off italics
Nightfox italicizes comments, function names, parameters, and types (matching the
original). If you'd rather have no italics, add this to your settings.json — it
strips the italic style from those scopes without changing any colors:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"comment",
"entity.name.function",
"support.function",
"variable.function",
"variable.parameter",
"meta.function.parameters",
"entity.name.class",
"entity.name.type",
"support.type",
"variable.language"
],
"settings": { "fontStyle": "" }
}
]
}
}
To also drop italics coming from semantic highlighting, add:
{
"editor.semanticTokenColorCustomizations": {
"rules": {
"*.declaration": { "fontStyle": "" }
}
}
}
Note: tokenColorCustomizations applies to whichever theme is active, so these
overrides affect any theme you use, not just Nightfox. Remove them if you switch
to a theme where you want its italics back.
How the colors are generated
Every variant is generated from a single source of truth so they stay consistent:
build/palettes.js — the palette hex values, taken from nightfox.nvim's
lua/nightfox/palette/*.lua and the extra/*.tmTheme files.
build/generate.js — maps each palette to the VS Code workbench colors,
tokenColors, and semanticTokenColors, writing themes/<variant>-color-theme.json.
To tweak a color, edit the palette and run npm run build — never hand-edit the
generated JSON in themes/.
Credits
- Original theme: EdenEast/nightfox.nvim — MIT.
- This VS Code port packages those palettes; all color design credit is upstream.
License
MIT — see LICENSE.