Firefox Theme NG for VS Code

A next-generation VS Code color theme inspired by Firefox's browser chrome — not just DevTools, but the full UI palette you see every day. Colors are extracted directly from Firefox's built-in theme definitions.

Highlights

Firefox-native palette: UI and token colors are taken directly from Firefox source files in omni.ja, so every major color choice stays anchored to the browser's real theme definitions.
Split source model: browser chrome CSS drives workbench surfaces such as sidebars, tabs, inputs, and status bars, while DevTools CSS drives syntax tokens such as keywords, strings, types, comments, and links.
Balanced dark and light themes: Firefox Dark NG and Firefox Light NG are built as equal first-class variants with the same structure and Firefox-matched palette counterparts.
Consistent coverage: each variant ships with 113 token color rules, 311 mapped scopes, and 312 workbench colors for broad editor coverage without uneven gaps between modes.
Semantic token mapping: syntax colors follow Firefox DevTools semantic categories, including body text, comments, keywords, definitions, properties, variables, strings, numbers, and links.
Traceable color system: workbench and token layers remain separate, making the theme easier to maintain and keeping UI colors from drifting away from syntax colors.

Themes

Firefox Dark NG — The signature Firefox dark palette: deep purples, cool grays, and vivid accent blues
Firefox Light NG — A clean, airy counterpart with Firefox's native light-mode tones

Installation

From Marketplace

Search for "Firefox Theme NG" in the VS Code Extensions view (Ctrl+Shift+X).

Development / Preview

Open this repository in VS Code
Press F5 to launch the Extension Development Host
In the new window, press Ctrl+K Ctrl+T to open the Color Theme picker
Select "Firefox Dark NG" or "Firefox Light NG"

Color Sources

Firefox Theme NG uses two source layers from Firefox's omni.ja assets:

Theme Layer	Firefox Source
Workbench / UI colors	`omni/chrome/browser/skin/classic/browser/browser-colors.css` and `browser.css`
Syntax / token colors	`omni/chrome/devtools/skin/variables.css`, `light-theme.css`, and `dark-theme.css`

Credits

Color values derived from Firefox (MPL 2.0). No MPL-licensed source code is included in this distribution
Firefox Theme (MIT License)
C/C++ Themes (MIT License)
Night Owl (MIT License)
Atom One Light Theme (MIT License)

License

MIT

Firefox Theme NG

tenkirin