Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Nightfox Themes for VSCodeNew to Visual Studio Code? Get it now.
Nightfox Themes for VSCode

Nightfox Themes for VSCode

malhar212

|
6 installs
| (0) | Free
A soft, warm dark and light theme family for VS Code, ported from EdenEast/nightfox.nvim. Includes Nightfox, Duskfox, Nordfox, Terafox, Carbonfox, Dayfox and Dawnfox.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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)

  1. Clone this repo.
  2. Regenerate the theme files if you've edited the palette: npm run build.
  3. Copy the folder into your VS Code extensions directory:
    • macOS/Linux: ~/.vscode/extensions/
    • Windows: %USERPROFILE%\.vscode\extensions\
  4. 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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft