Nightfox Theme Collections

Name: Nightfox Theme Collections
Author: Nikita R.

Publisher: Nikita R.Themes in package: 7

A highly customizable themes for VSCode, ported from nightfox.nvim

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Nightfox Theme Collections — Terafox

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0f1c1e
activityBar.border#2d4f56
activityBar.foreground#e6eaea
activityBar.inactiveForeground#587b7b
activityBarBadge.background#5a93aa
activityBarBadge.foreground#0f1c1e
badge.background#5a93aa
badge.foreground#0f1c1e
breadcrumb.activeSelectionForeground#e6eaea
breadcrumb.background#152528
breadcrumb.focusForeground#e6eaea
breadcrumb.foreground#587b7b
breadcrumbPicker.background#1d3337
button.background#5a93aa
button.foreground#0f1c1e
button.hoverBackground#73a3b7
diffEditor.insertedTextBackground#293e40
diffEditor.modifiedTextBackground#31474b
diffEditor.removedTextBackground#4a3332
dropdown.background#1d3337
dropdown.border#2d4f56
dropdown.foreground#e6eaea
editor.background#152528
editor.findMatchBackground#425e5e
editor.findMatchHighlightBackground#293e40
editor.findRangeHighlightBackground#293e40
editor.foreground#e6eaea
editor.inactiveSelectionBackground#293e40
editor.lineHighlightBackground#254147
editor.selectionBackground#293e40
editor.selectionHighlightBackground#293e40
editor.wordHighlightBackground#293e40
editor.wordHighlightStrongBackground#425e5e
editorBracketMatch.background#254147
editorBracketMatch.border#587b7b
editorCodeLens.foreground#587b7b
editorCursor.background#152528
editorCursor.foreground#e6eaea
editorError.foreground#e85c51
editorGroup.border#2d4f56
editorGroupHeader.noTabsBackground#0f1c1e
editorGroupHeader.tabsBackground#0f1c1e
editorGutter.addedBackground#7aa4a1
editorGutter.background#152528
editorGutter.deletedBackground#e85c51
editorGutter.modifiedBackground#fda47f
editorHint.foreground#7aa4a1
editorHoverWidget.background#1d3337
editorHoverWidget.border#2d4f56
editorHoverWidget.foreground#e6eaea
editorIndentGuide.activeBackground#2d4f56
editorIndentGuide.background#254147
editorInfo.foreground#5a93aa
editorLineNumber.activeForeground#cbd9d8
editorLineNumber.foreground#587b7b
editorOverviewRuler.border#2d4f56
editorOverviewRuler.errorForeground#e85c51
editorOverviewRuler.infoForeground#5a93aa
editorOverviewRuler.warningForeground#fda47f
editorRuler.foreground#254147
editorSuggestWidget.background#1d3337
editorSuggestWidget.border#2d4f56
editorSuggestWidget.foreground#e6eaea
editorSuggestWidget.highlightForeground#73a3b7
editorSuggestWidget.selectedBackground#425e5e
editorWarning.foreground#fda47f
editorWhitespace.foreground#254147
editorWidget.background#1d3337
editorWidget.border#2d4f56
editorWidget.foreground#e6eaea
gitDecoration.conflictingResourceForeground#ff8349
gitDecoration.deletedResourceForeground#e85c51
gitDecoration.ignoredResourceForeground#6d7f8b
gitDecoration.modifiedResourceForeground#fda47f
gitDecoration.untrackedResourceForeground#7aa4a1
input.background#1d3337
input.border#2d4f56
input.foreground#e6eaea
input.placeholderForeground#587b7b
inputOption.activeBorder#5a93aa
inputValidation.errorBackground#352d2e
inputValidation.errorBorder#e85c51
inputValidation.infoBackground#1f353c
inputValidation.infoBorder#5a93aa
inputValidation.warningBackground#383835
inputValidation.warningBorder#fda47f
list.activeSelectionBackground#425e5e
list.activeSelectionForeground#e6eaea
list.focusBackground#425e5e
list.focusForeground#e6eaea
list.highlightForeground#73a3b7
list.hoverBackground#1d3337
list.hoverForeground#e6eaea
list.inactiveSelectionBackground#293e40
list.inactiveSelectionForeground#e6eaea
menu.background#1d3337
menu.border#2d4f56
menu.foreground#e6eaea
menu.selectionBackground#425e5e
menu.selectionForeground#e6eaea
minimap.errorHighlight#e85c51
minimap.findMatchHighlight#425e5e
minimap.selectionHighlight#293e40
minimap.warningHighlight#fda47f
notificationCenter.border#2d4f56
notificationCenterHeader.background#1d3337
notificationLink.foreground#5a93aa
notifications.background#1d3337
notifications.border#2d4f56
notifications.foreground#e6eaea
notificationToast.border#2d4f56
panel.background#0f1c1e
panel.border#2d4f56
panelTitle.activeBorder#5a93aa
panelTitle.activeForeground#e6eaea
panelTitle.inactiveForeground#587b7b
peekView.border#2d4f56
peekViewEditor.background#152528
peekViewEditor.matchHighlightBackground#425e5e
peekViewResult.background#0f1c1e
peekViewResult.fileForeground#e6eaea
peekViewResult.lineForeground#cbd9d8
peekViewResult.matchHighlightBackground#425e5e
peekViewResult.selectionBackground#425e5e
peekViewResult.selectionForeground#e6eaea
peekViewTitle.background#0f1c1e
peekViewTitleDescription.foreground#587b7b
peekViewTitleLabel.foreground#e6eaea
progressBar.background#5a93aa
scrollbar.shadow#0f1c1e
scrollbarSlider.activeBackground#254147
scrollbarSlider.background#25414780
scrollbarSlider.hoverBackground#254147b0
settings.checkboxBackground#1d3337
settings.checkboxBorder#2d4f56
settings.checkboxForeground#e6eaea
settings.dropdownBackground#1d3337
settings.dropdownBorder#2d4f56
settings.dropdownForeground#e6eaea
settings.headerForeground#e6eaea
settings.modifiedItemIndicator#5a93aa
settings.numberInputBackground#1d3337
settings.numberInputBorder#2d4f56
settings.numberInputForeground#e6eaea
settings.textInputBackground#1d3337
settings.textInputBorder#2d4f56
settings.textInputForeground#e6eaea
sideBar.background#0f1c1e
sideBar.border#2d4f56
sideBar.foreground#cbd9d8
sideBarSectionHeader.background#152528
sideBarSectionHeader.foreground#e6eaea
sideBarTitle.foreground#e6eaea
statusBar.background#0f1c1e
statusBar.debuggingBackground#ff8349
statusBar.debuggingForeground#0f1c1e
statusBar.foreground#cbd9d8
statusBar.noFolderBackground#0f1c1e
statusBarItem.activeBackground#254147
statusBarItem.hoverBackground#1d3337
tab.activeBackground#152528
tab.activeBorder#5a93aa
tab.activeBorderTop#5a93aa
tab.activeForeground#e6eaea
tab.border#0f1c1e
tab.inactiveBackground#0f1c1e
tab.inactiveForeground#587b7b
tab.unfocusedActiveBorder#2d4f56
terminal.ansiBlack#2f3239
terminal.ansiBlue#5a93aa
terminal.ansiBrightBlack#4e5157
terminal.ansiBrightBlue#73a3b7
terminal.ansiBrightCyan#afd4de
terminal.ansiBrightGreen#8eb2af
terminal.ansiBrightMagenta#b97490
terminal.ansiBrightRed#eb746b
terminal.ansiBrightWhite#eeeeee
terminal.ansiBrightYellow#fdb292
terminal.ansiCyan#a1cdd8
terminal.ansiGreen#7aa4a1
terminal.ansiMagenta#ad5c7c
terminal.ansiRed#e85c51
terminal.ansiWhite#ebebeb
terminal.ansiYellow#fda47f
terminal.background#152528
terminal.foreground#e6eaea
titleBar.activeBackground#0f1c1e
titleBar.activeForeground#e6eaea
titleBar.border#2d4f56
titleBar.inactiveBackground#0f1c1e
titleBar.inactiveForeground#587b7b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6d7f8b	italic
string, string.quoted, string.template	#7aa4a1	—
string.regexp	#fdb292	—
constant.numeric, constant.language.numeric	#ff8349	—
constant, constant.language, constant.character.escape	#ff9664	—
variable, variable.other.readwrite, variable.parameter	#ebebeb	—
variable.other.property, variable.other.object.property	#5a93aa	—
keyword, keyword.control, storage.type, storage.modifier	#ad5c7c	—
keyword.operator	#cbd9d8	—
keyword.control.conditional, keyword.control.loop	#b97490	—
entity.name.function, support.function, meta.function-call	#73a3b7	—
entity.name.type, support.type, support.class	#fda47f	—
entity.name.class, entity.name.type.class, support.class	#fda47f	—
support.type.primitive, support.type.builtin	#afd4de	—
variable.language, variable.language.this, variable.language.super	#e85c51	—
constant.language, support.constant	#ff9664	—
variable.other.constant, variable.other.enummember	#a1cdd8	—
meta.preprocessor, entity.name.function.preprocessor	#d38d97	—
entity.name.tag, meta.tag	#ad5c7c	—
entity.other.attribute-name	#5a93aa	—
punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.terminator	#cbd9d8	—
invalid.deprecated	#587b7b	strikethrough
invalid, invalid.illegal	#e85c51	—
markup.heading, entity.name.section	#73a3b7	bold
markup.bold	#ad5c7c	bold
markup.italic	#ad5c7c	italic
markup.inline.raw, markup.fenced_code	#7aa4a1	—
markup.underline.link	#a1cdd8	—
markup.quote	#6d7f8b	italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}