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

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#ebe5df
activityBar.border#bdbfc9
activityBar.foreground#575279
activityBar.inactiveForeground#a8a3b3
activityBarBadge.background#286983
activityBarBadge.foreground#ebe5df
badge.background#286983
badge.foreground#ebe5df
breadcrumb.activeSelectionForeground#575279
breadcrumb.background#faf4ed
breadcrumb.focusForeground#575279
breadcrumb.foreground#a8a3b3
breadcrumbPicker.background#ebe0df
button.background#286983
button.foreground#ebe5df
button.hoverBackground#2d81a3
diffEditor.insertedTextBackground#dbded5
diffEditor.modifiedTextBackground#d0d8d8
diffEditor.removedTextBackground#ecd7d6
dropdown.background#ebe0df
dropdown.border#bdbfc9
dropdown.foreground#575279
editor.background#faf4ed
editor.findMatchBackground#b8cece
editor.findMatchHighlightBackground#d0d8d8
editor.findRangeHighlightBackground#d0d8d8
editor.foreground#575279
editor.inactiveSelectionBackground#d0d8d8
editor.lineHighlightBackground#ebdfe4
editor.selectionBackground#d0d8d8
editor.selectionHighlightBackground#d0d8d8
editor.wordHighlightBackground#d0d8d8
editor.wordHighlightStrongBackground#b8cece
editorBracketMatch.background#ebdfe4
editorBracketMatch.border#a8a3b3
editorCodeLens.foreground#a8a3b3
editorCursor.background#faf4ed
editorCursor.foreground#575279
editorError.foreground#b4637a
editorGroup.border#bdbfc9
editorGroupHeader.noTabsBackground#ebe5df
editorGroupHeader.tabsBackground#ebe5df
editorGutter.addedBackground#618774
editorGutter.background#faf4ed
editorGutter.deletedBackground#b4637a
editorGutter.modifiedBackground#ea9d34
editorHint.foreground#618774
editorHoverWidget.background#ebe0df
editorHoverWidget.border#bdbfc9
editorHoverWidget.foreground#575279
editorIndentGuide.activeBackground#bdbfc9
editorIndentGuide.background#ebdfe4
editorInfo.foreground#286983
editorLineNumber.activeForeground#625c87
editorLineNumber.foreground#a8a3b3
editorOverviewRuler.border#bdbfc9
editorOverviewRuler.errorForeground#b4637a
editorOverviewRuler.infoForeground#286983
editorOverviewRuler.warningForeground#ea9d34
editorRuler.foreground#ebdfe4
editorSuggestWidget.background#ebe0df
editorSuggestWidget.border#bdbfc9
editorSuggestWidget.foreground#575279
editorSuggestWidget.highlightForeground#2d81a3
editorSuggestWidget.selectedBackground#b8cece
editorWarning.foreground#ea9d34
editorWhitespace.foreground#ebdfe4
editorWidget.background#ebe0df
editorWidget.border#bdbfc9
editorWidget.foreground#575279
gitDecoration.conflictingResourceForeground#d7827e
gitDecoration.deletedResourceForeground#b4637a
gitDecoration.ignoredResourceForeground#9893a5
gitDecoration.modifiedResourceForeground#ea9d34
gitDecoration.untrackedResourceForeground#618774
input.background#ebe0df
input.border#bdbfc9
input.foreground#575279
input.placeholderForeground#a8a3b3
inputOption.activeBorder#286983
inputValidation.errorBackground#e5c9cb
inputValidation.errorBorder#b4637a
inputValidation.infoBackground#bbcacd
inputValidation.infoBorder#286983
inputValidation.warningBackground#f5dab6
inputValidation.warningBorder#ea9d34
list.activeSelectionBackground#b8cece
list.activeSelectionForeground#575279
list.focusBackground#b8cece
list.focusForeground#575279
list.highlightForeground#2d81a3
list.hoverBackground#ebe0df
list.hoverForeground#575279
list.inactiveSelectionBackground#d0d8d8
list.inactiveSelectionForeground#575279
menu.background#ebe0df
menu.border#bdbfc9
menu.foreground#575279
menu.selectionBackground#b8cece
menu.selectionForeground#575279
minimap.errorHighlight#b4637a
minimap.findMatchHighlight#b8cece
minimap.selectionHighlight#d0d8d8
minimap.warningHighlight#ea9d34
notificationCenter.border#bdbfc9
notificationCenterHeader.background#ebe0df
notificationLink.foreground#286983
notifications.background#ebe0df
notifications.border#bdbfc9
notifications.foreground#575279
notificationToast.border#bdbfc9
panel.background#ebe5df
panel.border#bdbfc9
panelTitle.activeBorder#286983
panelTitle.activeForeground#575279
panelTitle.inactiveForeground#a8a3b3
peekView.border#bdbfc9
peekViewEditor.background#faf4ed
peekViewEditor.matchHighlightBackground#b8cece
peekViewResult.background#ebe5df
peekViewResult.fileForeground#575279
peekViewResult.lineForeground#625c87
peekViewResult.matchHighlightBackground#b8cece
peekViewResult.selectionBackground#b8cece
peekViewResult.selectionForeground#575279
peekViewTitle.background#ebe5df
peekViewTitleDescription.foreground#a8a3b3
peekViewTitleLabel.foreground#575279
progressBar.background#286983
scrollbar.shadow#ebe5df
scrollbarSlider.activeBackground#ebdfe4
scrollbarSlider.background#ebdfe480
scrollbarSlider.hoverBackground#ebdfe4b0
settings.checkboxBackground#ebe0df
settings.checkboxBorder#bdbfc9
settings.checkboxForeground#575279
settings.dropdownBackground#ebe0df
settings.dropdownBorder#bdbfc9
settings.dropdownForeground#575279
settings.headerForeground#575279
settings.modifiedItemIndicator#286983
settings.numberInputBackground#ebe0df
settings.numberInputBorder#bdbfc9
settings.numberInputForeground#575279
settings.textInputBackground#ebe0df
settings.textInputBorder#bdbfc9
settings.textInputForeground#575279
sideBar.background#ebe5df
sideBar.border#bdbfc9
sideBar.foreground#625c87
sideBarSectionHeader.background#faf4ed
sideBarSectionHeader.foreground#575279
sideBarTitle.foreground#575279
statusBar.background#ebe5df
statusBar.debuggingBackground#d7827e
statusBar.debuggingForeground#ebe5df
statusBar.foreground#625c87
statusBar.noFolderBackground#ebe5df
statusBarItem.activeBackground#ebdfe4
statusBarItem.hoverBackground#ebe0df
tab.activeBackground#faf4ed
tab.activeBorder#286983
tab.activeBorderTop#286983
tab.activeForeground#575279
tab.border#ebe5df
tab.inactiveBackground#ebe5df
tab.inactiveForeground#a8a3b3
tab.unfocusedActiveBorder#bdbfc9
terminal.ansiBlack#575279
terminal.ansiBlue#286983
terminal.ansiBrightBlack#5f5695
terminal.ansiBrightBlue#2d81a3
terminal.ansiBrightCyan#5ca7b4
terminal.ansiBrightGreen#629f81
terminal.ansiBrightMagenta#9a80b9
terminal.ansiBrightRed#c26d85
terminal.ansiBrightWhite#e6ebf3
terminal.ansiBrightYellow#eea846
terminal.ansiCyan#56949f
terminal.ansiGreen#618774
terminal.ansiMagenta#907aa9
terminal.ansiRed#b4637a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ea9d34
terminal.background#faf4ed
terminal.foreground#575279
titleBar.activeBackground#ebe5df
titleBar.activeForeground#575279
titleBar.border#bdbfc9
titleBar.inactiveBackground#ebe5df
titleBar.inactiveForeground#a8a3b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9893a5	italic
string, string.quoted, string.template	#618774	—
string.regexp	#dd9024	—
constant.numeric, constant.language.numeric	#d7827e	—
constant, constant.language, constant.character.escape	#ca6e69	—
variable, variable.other.readwrite, variable.parameter	#575279	—
variable.other.property, variable.other.object.property	#286983	—
keyword, keyword.control, storage.type, storage.modifier	#907aa9	—
keyword.operator	#625c87	—
keyword.control.conditional, keyword.control.loop	#816b9a	—
entity.name.function, support.function, meta.function-call	#295e73	—
entity.name.type, support.type, support.class	#ea9d34	—
entity.name.class, entity.name.type.class, support.class	#ea9d34	—
support.type.primitive, support.type.builtin	#50848c	—
variable.language, variable.language.this, variable.language.super	#b4637a	—
constant.language, support.constant	#ca6e69	—
variable.other.constant, variable.other.enummember	#56949f	—
meta.preprocessor, entity.name.function.preprocessor	#c9709e	—
entity.name.tag, meta.tag	#907aa9	—
entity.other.attribute-name	#286983	—
punctuation.definition.tag, punctuation.section, punctuation.separator, punctuation.terminator	#625c87	—
invalid.deprecated	#a8a3b3	strikethrough
invalid, invalid.illegal	#b4637a	—
markup.heading, entity.name.section	#295e73	bold
markup.bold	#907aa9	bold
markup.italic	#907aa9	italic
markup.inline.raw, markup.fenced_code	#618774	—
markup.underline.link	#56949f	—
markup.quote	#9893a5	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}!`;
}