Cape Town Nights

Name: Cape Town Nights
Author: Walter Hahn

Publisher: Walter HahnThemes in package: 1

Take it easy.

GitHub

VS Code preview

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

Cape Town Nights — Cape Town Nights

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#0e1d1f
activityBar.border#0e1d1f
activityBar.dropBackground#2e3b3d
activityBar.foreground#adb1b3
activityBarBadge.background#f9ae64
activityBarBadge.foreground#0e1d1f
badge.background#f9ae64
badge.foreground#0e1d1f
button.background#f8b5f0
button.foreground#0e1d1f
button.hoverBackground#00ccf2
debugExceptionWidget.background#2e3b3d
debugExceptionWidget.border#2e3b3d
debugToolBar.background#2e3b3d
diffEditor.insertedTextBackground#4df19720
diffEditor.removedTextBackground#00d8ee20
dropdown.background#2e3b3d
dropdown.border#2e3b3d
dropdown.foreground#cdced0
editor.background#0e1d1f
editor.findMatchBackground#f0e6007f
editor.findMatchHighlightBackground#f0e6003f
editor.findRangeHighlightBackground#2e3b3d
editor.foreground#edecee
editor.hoverHighlightBackground#4e585a
editor.inactiveSelectionBackground#f8b5f033
editor.lineHighlightBackground#0e1d1f
editor.lineHighlightBorder#2e3b3d
editor.rangeHighlightBackground#2e3b3d
editor.selectionBackground#f8b5f033
editor.selectionHighlightBackground#2e3b3d
editor.wordHighlightBackground#f9ae647f
editor.wordHighlightStrongBackground#ff5e577f
editorBracketMatch.background#2e3b3d
editorBracketMatch.border#2e3b3d
editorCodeLens.foreground#adb1b3
editorCursor.foreground#f9ae64
editorError.border#edecee
editorError.foreground#00d8ee
editorGroup.border#2e3b3d
editorGroup.dropBackground#4e585a7f
editorGroup.emptyBackground#0e1d1f
editorGroup.focusedEmptyBorder#2e3b3d
editorGroupHeader.noTabsBackground#0e1d1f
editorGroupHeader.tabsBackground#0e1d1f
editorGroupHeader.tabsBorder#0e1d1f
editorGutter.addedBackground#4df197
editorGutter.background#0e1d1f
editorGutter.deletedBackground#00d8ee
editorGutter.modifiedBackground#f0e600
editorHoverWidget.background#2e3b3d
editorHoverWidget.border#2e3b3d
editorIndentGuide.activeBackground#4e585a
editorIndentGuide.background#2e3b3d
editorLineNumber.foreground#4e585a
editorLink.activeForeground#00ccf2
editorMarkerNavigation.background#2e3b3d
editorMarkerNavigationError.background#00d8ee
editorMarkerNavigationWarning.background#fd53bf
editorOverviewRuler.addedForeground#4df1977f
editorOverviewRuler.border#2e3b3d
editorOverviewRuler.commonContentForeground#f9ae64
editorOverviewRuler.currentContentForeground#00ccf2
editorOverviewRuler.deletedForeground#00d8ee7f
editorOverviewRuler.errorForeground#00d8ee7f
editorOverviewRuler.findMatchForeground#f0e600bf
editorOverviewRuler.incomingContentForeground#f8b5f0
editorOverviewRuler.infoForeground#f8b5f07f
editorOverviewRuler.modifiedForeground#f0e6007f
editorOverviewRuler.rangeHighlightForeground#4e585abf
editorOverviewRuler.selectionHighlightForeground#2e3b3dbf
editorOverviewRuler.warningForeground#fd53bf7f
editorOverviewRuler.wordHighlightForeground#4e585abf
editorOverviewRuler.wordHighlightStrongForeground#6e7678bf
editorPane.background#0e1d1f
editorRuler.foreground#2e3b3d
editorSuggestWidget.background#2e3b3d
editorSuggestWidget.border#2e3b3d
editorSuggestWidget.foreground#cdced0
editorSuggestWidget.highlightForeground#ff5e57
editorSuggestWidget.selectedBackground#4e585a
editorWarning.border#cdced0
editorWarning.foreground#fd53bf
editorWhitespace.foreground#2e3b3d
editorWidget.background#2e3b3d
editorWidget.border#2e3b3d
errorForeground#00d8ee
extensionButton.prominentBackground#f8b5f0
extensionButton.prominentForeground#0e1d1f
extensionButton.prominentHoverBackground#00ccf2
focusBorder#f9ae64
foreground#edecee
gitDecoration.conflictingResourceForeground#00ccf2
gitDecoration.deletedResourceForeground#00d8ee
gitDecoration.ignoredResourceForeground#6e7678
gitDecoration.modifiedResourceForeground#f0e600
gitDecoration.untrackedResourceForeground#f9ae64
input.background#2e3b3d
input.border#2e3b3d
input.foreground#cdced0
input.placeholderForeground#4e585a
inputOption.activeBorder#00ccf2
inputValidation.errorBackground#2e3b3d
inputValidation.errorBorder#00d8ee
inputValidation.infoBackground#2e3b3d
inputValidation.infoBorder#f8b5f0
inputValidation.warningBackground#2e3b3d
inputValidation.warningBorder#fd53bf
list.activeSelectionBackground#4df1977f
list.activeSelectionForeground#0e1d1f
list.dropBackground#6e7678
list.errorForeground#00d8ee
list.focusBackground#6e7678
list.focusForeground#0e1d1f
list.highlightForeground#f0e600
list.hoverBackground#2e3b3d
list.hoverForeground#adb1b3
list.inactiveSelectionBackground#2e3b3d
list.inactiveSelectionForeground#edecee
list.invalidItemForeground#00d8ee
list.warningForeground#f0e600
listFilterWidget.background#2e3b3d
listFilterWidget.noMatchesOutline#00d8ee
listFilterWidget.outline#f8b5f0
merge.border#8d9395
merge.commonContentBackground#f9ae644c
merge.commonHeaderBackground#f9ae644c
merge.currentContentBackground#00ccf24c
merge.currentHeaderBackground#00ccf24c
merge.incomingContentBackground#f8b5f04c
merge.incomingHeaderBackground#f8b5f04c
notification.background#2e3b3d
notification.buttonBackground#f8b5f0
notification.buttonForeground#0e1d1f
notification.buttonHoverBackground#00ccf2
notification.errorBackground#00d8ee
notification.errorForeground#0e1d1f
notification.foreground#edecee
notification.infoBackground#f8b5f0
notification.infoForeground#0e1d1f
notification.warningBackground#fd53bf
notification.warningForeground#0e1d1f
panel.background#0e1d1f
panel.border#2e3b3d
panelTitle.activeBorder#6e7678
panelTitle.activeForeground#cdced0
panelTitle.inactiveForeground#8d9395
peekView.border#ff5e57
peekViewEditor.background#2e3b3d
peekViewEditor.matchHighlightBackground#f0e6007f
peekViewEditorGutter.background#2e3b3d
peekViewResult.background#2e3b3d
peekViewResult.fileForeground#cdced0
peekViewResult.lineForeground#4e585a
peekViewResult.matchHighlightBackground#f0e600
peekViewResult.selectionBackground#6e7678
peekViewResult.selectionForeground#edecee
peekViewTitle.background#4e585a
peekViewTitleDescription.foreground#adb1b3
peekViewTitleLabel.foreground#edecee
pickerGroup.border#adb1b3
pickerGroup.foreground#edecee
progressBar.background#4df197
scrollbar.shadow#0e1d1f
scrollbarSlider.activeBackground#adb1b37f
scrollbarSlider.background#6e76787f
scrollbarSlider.hoverBackground#8d93957f
selection.background#4e585a
sideBar.background#0e1d1f
sideBar.border#2e3b3d
sideBar.foreground#cdced0
sideBarSectionHeader.background#4e585a
sideBarSectionHeader.foreground#cdced0
sideBarTitle.foreground#adb1b3
statusBar.background#f8b5f0
statusBar.border#f8b5f07f
statusBar.debuggingBackground#fd53bf
statusBar.debuggingBorder#fd53bf7f
statusBar.debuggingForeground#0e1d1f
statusBar.foreground#0e1d1f
statusBar.noFolderBackground#f9ae64
statusBar.noFolderBorder#f9ae647f
statusBar.noFolderForeground#0e1d1f
statusBarItem.activeBackground#00ccf2
statusBarItem.hoverBackground#4df197
statusBarItem.prominentBackground#00ccf2
statusBarItem.prominentHoverBackground#4df197
tab.activeBackground#0e1d1f
tab.activeForeground#cdced0
tab.border#0e1d1f
tab.inactiveBackground#2e3b3d
tab.inactiveForeground#6e7678
tab.unfocusedActiveForeground#6e7678
tab.unfocusedInactiveForeground#4e585a
terminal.ansiBlack#0e1d1f
terminal.ansiBlue#f8b5f0
terminal.ansiBrightBlack#2e3b3d
terminal.ansiBrightBlue#f8b5f0
terminal.ansiBrightCyan#00ccf2
terminal.ansiBrightGreen#00ccf2
terminal.ansiBrightMagenta#ff5e57
terminal.ansiBrightRed#fd53bf
terminal.ansiBrightWhite#edecee
terminal.ansiBrightYellow#f0e600
terminal.ansiCyan#00ccf2
terminal.ansiGreen#4df197
terminal.ansiMagenta#ff5e57
terminal.ansiRed#00d8ee
terminal.ansiWhite#cdced0
terminal.ansiYellow#f0e600
terminal.background#0e1d1f
terminal.foreground#cdced0
terminal.selectionBackground#f8b5f07f
terminalCursor.background#2e3b3d
terminalCursor.foreground#adb1b3
titleBar.activeBackground#0e1d1f
titleBar.activeForeground#adb1b3
titleBar.inactiveBackground#0e1d1f
titleBar.inactiveForeground#6e7678
tree.indentGuidesStroke#2e3b3d
walkThrough.embeddedEditorBackground#0e1d1f
welcomePage.buttonBackground#2e3b3d
welcomePage.buttonHoverBackground#4e585a
widget.shadow#0e1d1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#cdced0	—
comment	#6e7678	—
constant	#ff5e57	—
entity	#00ccf2	—
invalid	#00d8ee	—
keyword	#f9ae64	—
storage	#ff5e57	—
string	#4df197	—
support	#00ccf2	—
variable	#edecee	—
markup.heading	#00ccf2	—
markup.deleted	#00d8ee	—
markup.inserted	#4df197	—
markup.changed	#f0e600	—
markup.underline	—	underline
markup.underline.link	#f8b5f0	—
markup.list	#edecee	—
markup.raw	#ff5e57	—

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