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 — Carbonfox

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#0c0c0c
activityBar.border#535353
activityBar.foreground#f2f4f8
activityBar.inactiveForeground#7b7c7e
activityBarBadge.background#78a9ff
activityBarBadge.foreground#0c0c0c
badge.background#78a9ff
badge.foreground#0c0c0c
breadcrumb.activeSelectionForeground#f2f4f8
breadcrumb.background#161616
breadcrumb.focusForeground#f2f4f8
breadcrumb.foreground#7b7c7e
breadcrumbPicker.background#252525
button.background#78a9ff
button.foreground#0c0c0c
button.hoverBackground#8cb6ff
diffEditor.insertedTextBackground#172b20
diffEditor.modifiedTextBackground#222833
diffEditor.removedTextBackground#311d26
dropdown.background#252525
dropdown.border#535353
dropdown.foreground#f2f4f8
editor.background#161616
editor.findMatchBackground#525253
editor.findMatchHighlightBackground#2a2a2a
editor.findRangeHighlightBackground#2a2a2a
editor.foreground#f2f4f8
editor.inactiveSelectionBackground#2a2a2a
editor.lineHighlightBackground#353535
editor.selectionBackground#2a2a2a
editor.selectionHighlightBackground#2a2a2a
editor.wordHighlightBackground#2a2a2a
editor.wordHighlightStrongBackground#525253
editorBracketMatch.background#353535
editorBracketMatch.border#7b7c7e
editorCodeLens.foreground#7b7c7e
editorCursor.background#161616
editorCursor.foreground#f2f4f8
editorError.foreground#ee5396
editorGroup.border#535353
editorGroupHeader.noTabsBackground#0c0c0c
editorGroupHeader.tabsBackground#0c0c0c
editorGutter.addedBackground#25be6a
editorGutter.background#161616
editorGutter.deletedBackground#ee5396
editorGutter.modifiedBackground#08bdba
editorHint.foreground#3ddbd9
editorHoverWidget.background#252525
editorHoverWidget.border#535353
editorHoverWidget.foreground#f2f4f8
editorIndentGuide.activeBackground#535353
editorIndentGuide.background#353535
editorInfo.foreground#78a9ff
editorLineNumber.activeForeground#b6b8bb
editorLineNumber.foreground#7b7c7e
editorOverviewRuler.border#535353
editorOverviewRuler.errorForeground#ee5396
editorOverviewRuler.infoForeground#78a9ff
editorOverviewRuler.warningForeground#be95ff
editorRuler.foreground#353535
editorSuggestWidget.background#252525
editorSuggestWidget.border#535353
editorSuggestWidget.foreground#f2f4f8
editorSuggestWidget.highlightForeground#8cb6ff
editorSuggestWidget.selectedBackground#525253
editorWarning.foreground#be95ff
editorWhitespace.foreground#353535
editorWidget.background#252525
editorWidget.border#535353
editorWidget.foreground#f2f4f8
gitDecoration.conflictingResourceForeground#3ddbd9
gitDecoration.deletedResourceForeground#ee5396
gitDecoration.ignoredResourceForeground#6e6f70
gitDecoration.modifiedResourceForeground#08bdba
gitDecoration.untrackedResourceForeground#25be6a
input.background#252525
input.border#535353
input.foreground#f2f4f8
input.placeholderForeground#7b7c7e
inputOption.activeBorder#78a9ff
inputValidation.errorBackground#361f29
inputValidation.errorBorder#ee5396
inputValidation.infoBackground#252c39
inputValidation.infoBorder#78a9ff
inputValidation.warningBackground#2f2939
inputValidation.warningBorder#be95ff
list.activeSelectionBackground#525253
list.activeSelectionForeground#f2f4f8
list.focusBackground#525253
list.focusForeground#f2f4f8
list.highlightForeground#8cb6ff
list.hoverBackground#252525
list.hoverForeground#f2f4f8
list.inactiveSelectionBackground#2a2a2a
list.inactiveSelectionForeground#f2f4f8
menu.background#252525
menu.border#535353
menu.foreground#f2f4f8
menu.selectionBackground#525253
menu.selectionForeground#f2f4f8
minimap.errorHighlight#ee5396
minimap.findMatchHighlight#525253
minimap.selectionHighlight#2a2a2a
minimap.warningHighlight#be95ff
notificationCenter.border#535353
notificationCenterHeader.background#252525
notificationLink.foreground#78a9ff
notifications.background#252525
notifications.border#535353
notifications.foreground#f2f4f8
notificationToast.border#535353
panel.background#0c0c0c
panel.border#535353
panelTitle.activeBorder#78a9ff
panelTitle.activeForeground#f2f4f8
panelTitle.inactiveForeground#7b7c7e
peekView.border#535353
peekViewEditor.background#161616
peekViewEditor.matchHighlightBackground#525253
peekViewResult.background#0c0c0c
peekViewResult.fileForeground#f2f4f8
peekViewResult.lineForeground#b6b8bb
peekViewResult.matchHighlightBackground#525253
peekViewResult.selectionBackground#525253
peekViewResult.selectionForeground#f2f4f8
peekViewTitle.background#0c0c0c
peekViewTitleDescription.foreground#7b7c7e
peekViewTitleLabel.foreground#f2f4f8
progressBar.background#78a9ff
scrollbar.shadow#0c0c0c
scrollbarSlider.activeBackground#353535
scrollbarSlider.background#35353580
scrollbarSlider.hoverBackground#353535b0
settings.checkboxBackground#252525
settings.checkboxBorder#535353
settings.checkboxForeground#f2f4f8
settings.dropdownBackground#252525
settings.dropdownBorder#535353
settings.dropdownForeground#f2f4f8
settings.headerForeground#f2f4f8
settings.modifiedItemIndicator#78a9ff
settings.numberInputBackground#252525
settings.numberInputBorder#535353
settings.numberInputForeground#f2f4f8
settings.textInputBackground#252525
settings.textInputBorder#535353
settings.textInputForeground#f2f4f8
sideBar.background#0c0c0c
sideBar.border#535353
sideBar.foreground#b6b8bb
sideBarSectionHeader.background#161616
sideBarSectionHeader.foreground#f2f4f8
sideBarTitle.foreground#f2f4f8
statusBar.background#0c0c0c
statusBar.debuggingBackground#3ddbd9
statusBar.debuggingForeground#0c0c0c
statusBar.foreground#b6b8bb
statusBar.noFolderBackground#0c0c0c
statusBarItem.activeBackground#353535
statusBarItem.hoverBackground#252525
tab.activeBackground#161616
tab.activeBorder#78a9ff
tab.activeBorderTop#78a9ff
tab.activeForeground#f2f4f8
tab.border#0c0c0c
tab.inactiveBackground#0c0c0c
tab.inactiveForeground#7b7c7e
tab.unfocusedActiveBorder#535353
terminal.ansiBlack#282828
terminal.ansiBlue#78a9ff
terminal.ansiBrightBlack#484848
terminal.ansiBrightBlue#8cb6ff
terminal.ansiBrightCyan#52bdff
terminal.ansiBrightGreen#46c880
terminal.ansiBrightMagenta#c8a5ff
terminal.ansiBrightRed#f16da6
terminal.ansiBrightWhite#e4e4e5
terminal.ansiBrightYellow#2dc7c4
terminal.ansiCyan#33b1ff
terminal.ansiGreen#25be6a
terminal.ansiMagenta#be95ff
terminal.ansiRed#ee5396
terminal.ansiWhite#dfdfe0
terminal.ansiYellow#08bdba
terminal.background#161616
terminal.foreground#f2f4f8
titleBar.activeBackground#0c0c0c
titleBar.activeForeground#f2f4f8
titleBar.border#535353
titleBar.inactiveBackground#0c0c0c
titleBar.inactiveForeground#7b7c7e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6e6f70	italic
string, string.quoted, string.template	#25be6a	—
string.regexp	#2dc7c4	—
constant.numeric, constant.language.numeric	#3ddbd9	—
constant, constant.language, constant.character.escape	#5ae0df	—
variable, variable.other.readwrite, variable.parameter	#dfdfe0	—
variable.other.property, variable.other.object.property	#78a9ff	—
keyword, keyword.control, storage.type, storage.modifier	#be95ff	—
keyword.operator	#b6b8bb	—
keyword.control.conditional, keyword.control.loop	#c8a5ff	—
entity.name.function, support.function, meta.function-call	#8cb6ff	—
entity.name.type, support.type, support.class	#08bdba	—
entity.name.class, entity.name.type.class, support.class	#08bdba	—
support.type.primitive, support.type.builtin	#52bdff	—
variable.language, variable.language.this, variable.language.super	#ee5396	—
constant.language, support.constant	#5ae0df	—
variable.other.constant, variable.other.enummember	#33b1ff	—
meta.preprocessor, entity.name.function.preprocessor	#ff91c1	—
entity.name.tag, meta.tag	#be95ff	—
entity.other.attribute-name	#78a9ff	—
punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.terminator	#b6b8bb	—
invalid.deprecated	#7b7c7e	strikethrough
invalid, invalid.illegal	#ee5396	—
markup.heading, entity.name.section	#8cb6ff	bold
markup.bold	#be95ff	bold
markup.italic	#be95ff	italic
markup.inline.raw, markup.fenced_code	#25be6a	—
markup.underline.link	#33b1ff	—
markup.quote	#6e6f70	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}!`;
}