Deep navy, medium-contrast blues and holographic cyan accents: a dark theme built for long sessions.
Features
- Deep navy, not black. The editor sits on
#070F1E, with slightly darker sidebars and panels to give the layout depth without harsh edges.
- Medium contrast by design. Body text is 6.4:1 against the background, readable without glare. Syntax colors range from 7:1 to 10:1, and comments stay quiet at 3.6:1.
- Holographic details. Thin cyan borders on focus, the active tab and panels, plus a bright cyan cursor. Amber is reserved for constants, warnings and alerts.
- Complete coverage. More than 370 workbench colors, TextMate scopes for TypeScript, JavaScript, Python, HTML, CSS, JSON and Markdown, semantic highlighting and a 16-color ANSI terminal palette.
- Just a theme. No injected CSS, no patched files, no companion extensions.
Installation
- Open Extensions (
Ctrl+Shift+X, or ⇧⌘X on macOS), search for Navy HUD and select Install.
- Open the color theme picker with
Ctrl+K Ctrl+T (⌘K ⌘T on macOS) and choose Navy HUD.
Or install it from the command line:
code --install-extension db0w.navy-hud-theme
With Settings Sync turned on, VS Code installs and applies the theme on your other machines automatically.
Screenshots
Languages
Python and CSS side by side, with color decorators and bracket pair guides.
IntelliSense
Source control and diff
Palette
| Role |
Color |
Contrast on the editor background |
| Editor background |
#070F1E |
— |
| Text |
#7898BA |
6.4:1 |
| Keywords |
#3AA8EC |
7.3:1 |
| Functions |
#7DB6EE |
8.9:1 |
| Strings |
#6CC4D6 |
9.6:1 |
| Numbers and constants |
#E8A54C |
9.0:1 |
| Types and classes |
#55BDEB |
9.0:1 |
| Properties |
#8FAED0 |
8.3:1 |
| Operators |
#5A86B0 |
5.0:1 |
| Comments |
#4E6E92 |
3.6:1 |
| Accent and cursor |
#5CE1FF |
12.5:1 |
| Errors |
#F2555A |
5.7:1 |
Recommended settings
A color theme can't change fonts or editor behavior. These settings complete the HUD look:
{
"editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', Consolas, monospace",
"editor.fontLigatures": true,
"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": "on",
"editor.guides.bracketPairs": "active",
"editor.renderLineHighlight": "all"
}
The screenshots were taken on Windows with Consolas at 15 px.
Contributing
Found a color that doesn't work well for a language or an extension? Open an issue with a screenshot and the token scope. You can find the scope with Developer: Inspect Editor Tokens and Scopes.
Pull requests are welcome. DESARROLLO.md (in Spanish) explains how to test and package the theme.
License
MIT © db0w
