Nightfall Theme

Name: Nightfall Theme
Author: Qatoqat

Publisher: QatoqatThemes in package: 1

A dark, elegant vscode theme based on JetBrains Nightfall theme

GitHub

VS Code preview

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

Nightfall Theme — Nightfall (default)

fetchUser.ts

index.ts

README.md

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#232530
activityBar.border#2e303e
activityBar.foreground#bfc7d7
activityBar.inactiveForeground#abb2bf80
activityBarBadge.background#26bbd9
activityBarBadge.foreground#ffffff
activityBarTop.background#232530
badge.background#e9436d
badge.foreground#ffffff
button.background#232530
button.foreground#7f9ab3
button.hoverBackground#2a2c38
dropdown.background#232530
dropdown.border#2e303e
dropdown.foreground#abb2bf
editor.background#1c1e26
editor.findMatchBackground#26bbd940
editor.findMatchHighlightBackground#b877db40
editor.foreground#abb2bf
editor.lineHighlightBackground#2e303e50
editor.selectionBackground#2a2c38
editor.selectionHighlightBackground#26bbd920
editor.wordHighlightBackground#26bbd920
editorCursor.foreground#26bbd9
editorGroup.emptyBackground#232530
editorGroupHeader.tabsBackground#232530
editorHoverWidget.background#232530
editorHoverWidget.border#2e303e
editorHoverWidget.foreground#abb2bf
editorHoverWidget.statusBarBackground#232530
editorIndentGuide.activeBackground1#2e303e
editorIndentGuide.background1#2e303e50
editorLineNumber.activeForeground#bfc7d7
editorLineNumber.foreground#5c6370
editorSuggestWidget.background#232530
editorSuggestWidget.border#2e303e
editorSuggestWidget.foreground#abb2bf
editorSuggestWidget.highlightForeground#b877db
editorSuggestWidget.selectedBackground#282a36
editorWidget.background#1c1e26
editorWidget.border#2e303e
editorWidget.foreground#abb2bf
focusBorder#abb2bf77
foreground#abb2bf
input.background#232530
input.border#2e303e
input.foreground#abb2bf
input.placeholderForeground#5c6370
list.activeSelectionBackground#2a2c38
list.activeSelectionForeground#bfc7d7
list.focusBackground#2a2c38
list.hoverBackground#282a36
list.inactiveSelectionBackground#2a2c38
list.inactiveSelectionForeground#abb2bf
menu.border#2e303e
menu.foreground#abb2bf
menu.separatorBackground#2e303e
panel.background#1c1e26
panel.border#2e303e
panelSectionHeader.background#232530
panelTitle.activeForeground#bfc7d7
panelTitle.inactiveForeground#abb2bf80
progressBar.background#26bbd9
quickInput.background#232530
quickInput.foreground#abb2bf
quickInputList.focusBackground#282a36
quickInputTitle.background#232530
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#6c6f9330
scrollbarSlider.background#6c6f9325
scrollbarSlider.hoverBackground#6c6f9330
selection.background#2a2c38
sideBar.background#1c1e26
sideBar.border#2e303e
sideBar.foreground#abb2bf
sideBarSectionHeader.background#232530
sideBarSectionHeader.foreground#bfc7d7
sideBarTitle.background#232530
sideBarTitle.foreground#bfc7d7
statusBar.background#232530
statusBar.border#2e303e
statusBar.debuggingBackground#b877db
statusBar.foreground#bfc7d7
statusBar.noFolderBackground#232530
tab.activeBackground#2a2c38
tab.activeBorder#e9436d
tab.activeForeground#bfc7d7
tab.border#2e303e
tab.hoverBackground#282a36
tab.inactiveBackground#232530
tab.inactiveForeground#abb2bf80
textLink.activeForeground#e9436de6
textLink.foreground#e9436d
titleBar.activeBackground#1c1e26
titleBar.activeForeground#7f9ab3
titleBar.inactiveBackground#1c1e26
titleBar.inactiveForeground#abb2bf80
widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5c6370	—
string, string.quoted	#64d1a9	—
constant.character.escape, string.escape, constant.character.escape.backslash	#64d1a9	—
constant.numeric, constant.language, constant.character, constant.other, constant, variable.constant	#34d3fb	—
constant.other.enum, constant.enum, variable.enum, enum.member	#ff9668	—
keyword, storage.type, storage.modifier, keyword.control, keyword.return, keyword.other	#b877db	—
entity.name.function, support.function, meta.function, meta.function.declaration, entity.name.method	#fab795	—
variable, variable.other, variable.other.local, variable.other.readwrite	#d5d8da	—
variable.parameter, parameter, variable.parameter.language	#f3c1ff	—
meta.type.parameters, meta.generic, meta.generic-name, support.type.parameter, entity.name.type.parameter	#64d1a9	—
support.type.builtin, support.class.builtin, storage.type.builtin, entity.name.trait, support.type.trait, meta.trait, support.type, storage.type	#64d1a9	—
entity.name.type.interface, entity.name.type.protocol, support.type.interface, protocol.reference, entity.name.type.abstract, meta.interface	#64d1a9	—
entity.name.type, support.type, entity.name.class, support.class, storage.type, entity.name.type.class	#dbbe7f	—
entity.name.tag, punctuation.definition.tag	#e9436d	—
entity.other.attribute-name, variable.other.property, variable.field, storage.modifier.static, variable.other.static	#34d3fb	—

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}!`;
}