NightForge — VS Code Theme

🎨 Handcrafted from the ground up by Rabial Hosen

Designed for developers who spend 10+ hours a day in their editor. Every color — from syntax highlighting to the tiniest UI detail — has been personally chosen, tested, and refined for eye comfort, readability, and visual distinction.

Design Philosophy

• Built from scratch — not a remix.
• Zero color reuse — every important syntax group has its own unique identity.
• No neon, no oversaturation, no pure black, no pure white.
• Eye friendly for extended coding sessions — colors that don't fight back.
• 100+ manual iterations to get every shade just right.

Unique Color System (45+ Categories)

Every important token type gets its own unique color:

Keywords → Violet · Functions → Blue · Methods → Steel Blue
Classes → Amber · Interfaces → Teal · Types → Mint
Enums → Sky Blue · Decorators → Coral · Properties → Silver Blue
Variables → Near White · Constants → Soft Red · Parameters → Warm Beige
Strings → Soft Green · Numbers → Orange · Booleans → Red
Operators → Sky Blue · Regex → Cyan · Comments → Muted Blue-Gray
TODO → Bright Red · HTML Tags → Red · HTML Attributes → Light Violet
CSS Properties → Blue · CSS Values → Green · CSS Classes → Amber
JSON Keys → Silver Blue · YAML Keys → Blue · SQL Keywords → Violet
Errors → Red · Warnings → Amber · Info → Blue · Hints → Green

Workbench Features

• Premium activity bar with visible active indicators
• Sidebar visually separated from editor
• Explorer tree guide lines always visible
• Modern tabs with rounded corners and premium spacing
• Premium command palette with floating appearance
• Beautiful hover cards
• Elegant scrollbars
• Customized terminal ANSI colors
• Git decoration colors for added, modified, deleted, renamed, untracked
• Beautiful diff editor colors
• Bracket pair colorization (6 unique colors)
• Inlay hint support
• Sticky scroll premium styling

Extension Compatibility

• GitHub Copilot
• GitLens
• Error Lens
• Docker
• Prisma
• ESLint
• Prettier
• Thunder Client
• REST Client
• Todo Tree
• Vue Official
• TypeScript Vue Plugin

Font Recommendation

Fira Code Retina

Installation

Via VS Code Marketplace (Coming Soon)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "NightForge"
4. Click Install

Manual Installation (VSIX)

1. Download the .vsix file (nightforge-1.1.1.vsix)
2. Open VS Code
3. Press Ctrl+Shift+X to open Extensions
4. Click the ... (More Actions) menu at the top
5. Select "Install from VSIX..."
6. Browse and select the downloaded .vsix file
7. VS Code will install the theme automatically
8. Press Ctrl+K Ctrl+T → select NightForge from the list

Custom CSS (Optional — Recommended)

For the full premium experience (scrollbar styling, activity bar opacity, etc.):

1. Install Custom CSS and JS Loader
2. Create a file named custom-css-vscode.css and paste the CSS below
3. In VS Code settings.json, add:

   "vscode_custom_css.imports": [
     "file:///PATH_TO/custom-css-vscode.css"
   ],
   "vscode_custom_css.policy": true
   

4. Reload VS Code (Ctrl+Shift+P → "Reload with Custom CSS and JS")

💡 Tip: The CSS file also ships with the theme at themes/custom-css-vscode.css. If you installed from the Marketplace, find the extension folder and point the import directly to it.

/* Just For Fun — Essential CSS Enhancements */
/* ========================== Activity Bar ========================== */
.monaco-workbench .activitybar > .content .monaco-action-bar .action-item .action-label {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked .action-label {
  opacity: 1;
}
.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:hover .action-label {
  opacity: 0.85;
}

/* ========================== Sidebar Typography ========================== */
.monaco-workbench .sidebar .monaco-list-row .monaco-icon-label .label-name,
.monaco-workbench .sidebar .monaco-list-row .monaco-icon-label .monaco-icon-label-container {
  font-size: 18px;
}

/* ========================== Explorer Tree Connector Lines ========================== */
.monaco-tl-row .monaco-tl-indent,
.monaco-tl-row .monaco-tl-indent:last-child,
.monaco-tl-row .monaco-tl-indent.active {
  border-right: 1px solid #2A313B;
  box-sizing: border-box;
  height: 100%;
}

/* ========================== Editor Gutter ========================== */
.monaco-editor .margin {
  border-right: none !important;
}

/* ========================== Bracket Match ========================== */
.monaco-editor .bracket-match {
  border: 1px solid rgba(22, 159, 177, 0.25);
  background: rgba(22, 159, 177, 0.05);
  border-radius: 2px;
}

/* ========================== Breadcrumb Layout ========================== */
.monaco-breadcrumbs {
  padding-bottom: 3px;
}
.monaco-workbench .breadcrumbs-control {
  padding-bottom: 3px;
  min-height: 24px;
  display: flex;
  align-items: center;
}
.monaco-workbench .breadcrumbs-control .monaco-breadcrumb-item {
  padding: 2px 4px;
  line-height: 20px;
}

/* ========================== Explorer Bottom Sections ========================== */
.monaco-workbench .pane-header {
  border-bottom: none !important;
}
.monaco-workbench .pane-header .title {
  letter-spacing: 0.2px;
}

/* ========================== Scrollbar ========================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(90, 98, 110, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 98, 110, 0.45);
}

Recommended Settings

{
  "editor.fontFamily": "'Fira Code Retina', 'Cascadia Code', 'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.inlayHints.enabled": "on",
  "workbench.colorTheme": "Just For Fun"
}

License

MIT

Made with care for developers who code for fun.