City Night

Name: City Night
Author: juji

Publisher: jujiThemes in package: 4

A dark VS Code theme inspired by a city skyline at night.

Open in VS Code GitHub

Color themes

VS Code preview

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

City Night — City Night

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#080b13
activityBar.border#2a3350
activityBar.foreground#9d7bc9
activityBar.inactiveForeground#4d5872
activityBarBadge.background#4a1a80
activityBarBadge.foreground#c9b8de
badge.background#7ad0ff
badge.foreground#0b0f1a
button.background#4a1a80
button.foreground#c9b8de
button.hoverBackground#391464
checkbox.background#111726
checkbox.border#6b7590
checkbox.foreground#ffd08a
checkbox.selectBackground#111726
checkbox.selectBorder#ffd08a
descriptionForeground#8891a5
diffEditor.insertedTextBackground#6fe3c422
diffEditor.removedTextBackground#ff6b8122
dropdown.background#111726
dropdown.border#2a3350
editor.background#0b0f1a
editor.findMatchBackground#4a1a8055
editor.findMatchHighlightBackground#4a1a8033
editor.foreground#a8b2c4
editor.inactiveSelectionBackground#2c3a5a55
editor.lineHighlightBackground#141a2a
editor.selectionBackground#2c3a5a99
editor.selectionHighlightBackground#2c3a5a55
editor.wordHighlightBackground#2c3a5a44
editorBracketHighlight.foreground1#4a1a80
editorBracketHighlight.foreground2#7ad0ff
editorBracketHighlight.foreground3#c58aff
editorBracketHighlight.foreground4#6fe3c4
editorBracketHighlight.foreground5#ffd08a
editorBracketHighlight.foreground6#ff6b9d
editorBracketMatch.background#4a1a8022
editorBracketMatch.border#4a1a8088
editorCursor.foreground#ffd08a
editorGroup.border#2a3350
editorGroupHeader.border#2a3350
editorGroupHeader.tabsBackground#0a0e18
editorGroupHeader.tabsBorder#2a3350
editorGutter.addedBackground#6fe3c4
editorGutter.background#0b0f1a
editorGutter.deletedBackground#ff6b81
editorGutter.modifiedBackground#7ad0ff
editorHoverWidget.background#111726
editorHoverWidget.border#2a3350
editorIndentGuide.activeBackground1#4a5578
editorIndentGuide.background1#242c40
editorLineNumber.activeForeground#9d7bc9
editorLineNumber.foreground#3a4256
editorRuler.foreground#242c40
editorSuggestWidget.background#111726
editorSuggestWidget.border#2a3350
editorSuggestWidget.highlightForeground#4a1a80
editorSuggestWidget.selectedBackground#2a3350
editorWhitespace.foreground#232b3d
editorWidget.background#111726
editorWidget.border#2a3350
errorForeground#ff6b81
focusBorder#4a1a8066
foreground#a8b2c4
gitDecoration.addedResourceForeground#6fe3c4
gitDecoration.deletedResourceForeground#ff6b81
gitDecoration.ignoredResourceForeground#3a4256
gitDecoration.modifiedResourceForeground#7ad0ff
gitDecoration.untrackedResourceForeground#ffd08a
input.background#111726
input.border#2a3350
input.foreground#c9d3e0
input.placeholderForeground#3a4256
list.activeSelectionBackground#2a3350
list.activeSelectionForeground#ffd08a
list.focusBackground#2a3350
list.highlightForeground#4a1a80
list.hoverBackground#141a2a
list.inactiveSelectionBackground#141a2a
panel.background#0a0e18
panel.border#2a3350
panelSection.border#2a3350
panelSectionHeader.background#0a0e18
panelTitle.activeBorder#4a1a80
panelTitle.activeForeground#ffd08a
panelTitle.inactiveForeground#6b7590
pickerGroup.border#2a3350
pickerGroup.foreground#7ad0ff
progressBar.background#4a1a80
quickInput.background#111726
quickInput.foreground#c9d3e0
quickInputList.focusBackground#2a3350
quickInputList.focusForeground#ffd08a
quickInputTitle.background#111726
scrollbarSlider.activeBackground#2c3a5acc
scrollbarSlider.background#1c233466
scrollbarSlider.hoverBackground#2c3a5a99
sideBar.background#0a0e18
sideBar.border#2a3350
sideBar.foreground#8891a5
sideBarSectionHeader.background#0a0e18
sideBarSectionHeader.border#2a3350
sideBarTitle.foreground#c9d3e0
statusBar.background#080b13
statusBar.border#080b13
statusBar.debuggingBackground#ff6b81
statusBar.debuggingForeground#0b0f1a
statusBar.foreground#8891a5
statusBar.noFolderBackground#080b13
tab.activeBackground#0b0f1a
tab.activeBorderTop#4a1a80
tab.activeForeground#ffd08a
tab.border#080b13
tab.inactiveBackground#0a0e18
tab.inactiveForeground#6b7590
terminal.ansiBlack#0b0f1a
terminal.ansiBlue#7ad0ff
terminal.ansiBrightBlack#3a4256
terminal.ansiBrightBlue#9adcff
terminal.ansiBrightCyan#8ff0d6
terminal.ansiBrightGreen#8ff0d6
terminal.ansiBrightMagenta#d6acff
terminal.ansiBrightRed#ff8a9b
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdca6
terminal.ansiCyan#6fe3c4
terminal.ansiGreen#6fe3c4
terminal.ansiMagenta#c58aff
terminal.ansiRed#ff6b81
terminal.ansiWhite#a8b2c4
terminal.ansiYellow#ffd08a
terminal.background#0a0e18
terminal.foreground#a8b2c4
titleBar.activeBackground#080b13
titleBar.activeForeground#c9d3e0
titleBar.border#2a3350
titleBar.inactiveBackground#080b13
titleBar.inactiveForeground#4d5872

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#ff6b9d	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#e8935e	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#c58aff	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#ff6b9d	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#e8935e	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#ff6b9d	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#e8935e	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#c58aff	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#ff6b9d	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#e8935e	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline

VS Code preview

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

City Night — City Night Cyan

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#080b13
activityBar.border#2a3350
activityBar.foreground#5fb8b0
activityBar.inactiveForeground#4d5872
activityBarBadge.background#0f5c66
activityBarBadge.foreground#a8e8dc
badge.background#7ad0ff
badge.foreground#0b0f1a
button.background#0f5c66
button.foreground#a8e8dc
button.hoverBackground#0a4048
checkbox.background#111726
checkbox.border#6b7590
checkbox.foreground#5eeacc
checkbox.selectBackground#111726
checkbox.selectBorder#5eeacc
descriptionForeground#8891a5
diffEditor.insertedTextBackground#6fe3c422
diffEditor.removedTextBackground#ff6b8122
dropdown.background#111726
dropdown.border#2a3350
editor.background#0b0f1a
editor.findMatchBackground#0f5c6655
editor.findMatchHighlightBackground#0f5c6633
editor.foreground#a8b2c4
editor.inactiveSelectionBackground#2c3a5a55
editor.lineHighlightBackground#141a2a
editor.selectionBackground#2c3a5a99
editor.selectionHighlightBackground#2c3a5a55
editor.wordHighlightBackground#2c3a5a44
editorBracketHighlight.foreground1#0f5c66
editorBracketHighlight.foreground2#7ad0ff
editorBracketHighlight.foreground3#7de8d4
editorBracketHighlight.foreground4#6fe3c4
editorBracketHighlight.foreground5#5eeacc
editorBracketHighlight.foreground6#4dd9e8
editorBracketMatch.background#0f5c6622
editorBracketMatch.border#0f5c6688
editorCursor.foreground#5eeacc
editorGroup.border#2a3350
editorGroupHeader.border#2a3350
editorGroupHeader.tabsBackground#0a0e18
editorGroupHeader.tabsBorder#2a3350
editorGutter.addedBackground#6fe3c4
editorGutter.background#0b0f1a
editorGutter.deletedBackground#ff6b81
editorGutter.modifiedBackground#7ad0ff
editorHoverWidget.background#111726
editorHoverWidget.border#2a3350
editorIndentGuide.activeBackground1#4a5578
editorIndentGuide.background1#242c40
editorLineNumber.activeForeground#5fb8b0
editorLineNumber.foreground#3a4256
editorRuler.foreground#242c40
editorSuggestWidget.background#111726
editorSuggestWidget.border#2a3350
editorSuggestWidget.highlightForeground#0f5c66
editorSuggestWidget.selectedBackground#2a3350
editorWhitespace.foreground#232b3d
editorWidget.background#111726
editorWidget.border#2a3350
errorForeground#ff6b81
focusBorder#0f5c6666
foreground#a8b2c4
gitDecoration.addedResourceForeground#6fe3c4
gitDecoration.deletedResourceForeground#ff6b81
gitDecoration.ignoredResourceForeground#3a4256
gitDecoration.modifiedResourceForeground#7ad0ff
gitDecoration.untrackedResourceForeground#5eeacc
input.background#111726
input.border#2a3350
input.foreground#c9d3e0
input.placeholderForeground#3a4256
list.activeSelectionBackground#2a3350
list.activeSelectionForeground#5eeacc
list.focusBackground#2a3350
list.highlightForeground#0f5c66
list.hoverBackground#141a2a
list.inactiveSelectionBackground#141a2a
panel.background#0a0e18
panel.border#2a3350
panelSection.border#2a3350
panelSectionHeader.background#0a0e18
panelTitle.activeBorder#0f5c66
panelTitle.activeForeground#5eeacc
panelTitle.inactiveForeground#6b7590
pickerGroup.border#2a3350
pickerGroup.foreground#7ad0ff
progressBar.background#0f5c66
quickInput.background#111726
quickInput.foreground#c9d3e0
quickInputList.focusBackground#2a3350
quickInputList.focusForeground#5eeacc
quickInputTitle.background#111726
scrollbarSlider.activeBackground#2c3a5acc
scrollbarSlider.background#1c233466
scrollbarSlider.hoverBackground#2c3a5a99
sideBar.background#0a0e18
sideBar.border#2a3350
sideBar.foreground#8891a5
sideBarSectionHeader.background#0a0e18
sideBarSectionHeader.border#2a3350
sideBarTitle.foreground#c9d3e0
statusBar.background#080b13
statusBar.border#080b13
statusBar.debuggingBackground#ff6b81
statusBar.debuggingForeground#0b0f1a
statusBar.foreground#8891a5
statusBar.noFolderBackground#080b13
tab.activeBackground#0b0f1a
tab.activeBorderTop#0f5c66
tab.activeForeground#5eeacc
tab.border#080b13
tab.inactiveBackground#0a0e18
tab.inactiveForeground#6b7590
terminal.ansiBlack#0b0f1a
terminal.ansiBlue#7ad0ff
terminal.ansiBrightBlack#3a4256
terminal.ansiBrightBlue#9adcff
terminal.ansiBrightCyan#8ff0d6
terminal.ansiBrightGreen#8ff0d6
terminal.ansiBrightMagenta#a8f0e2
terminal.ansiBrightRed#7ae8f0
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#8ff0dc
terminal.ansiCyan#6fe3c4
terminal.ansiGreen#6fe3c4
terminal.ansiMagenta#7de8d4
terminal.ansiRed#ff6b81
terminal.ansiWhite#a8b2c4
terminal.ansiYellow#5eeacc
terminal.background#0a0e18
terminal.foreground#a8b2c4
titleBar.activeBackground#080b13
titleBar.activeForeground#c9d3e0
titleBar.border#2a3350
titleBar.inactiveBackground#080b13
titleBar.inactiveForeground#4d5872

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#4dd9e8	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#3ec9a3	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#7de8d4	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#4dd9e8	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#3ec9a3	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#4dd9e8	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#3ec9a3	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#7de8d4	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#4dd9e8	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#3ec9a3	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline

VS Code preview

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

City Night — City Night Lime

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#080b13
activityBar.border#2a3350
activityBar.foreground#7ab85f
activityBar.inactiveForeground#4d5872
activityBarBadge.background#1f5c0f
activityBarBadge.foreground#c8e8a8
badge.background#7ad0ff
badge.foreground#0b0f1a
button.background#1f5c0f
button.foreground#c8e8a8
button.hoverBackground#164808
checkbox.background#111726
checkbox.border#6b7590
checkbox.foreground#7ce85e
checkbox.selectBackground#111726
checkbox.selectBorder#7ce85e
descriptionForeground#8891a5
diffEditor.insertedTextBackground#6fe3c422
diffEditor.removedTextBackground#ff6b8122
dropdown.background#111726
dropdown.border#2a3350
editor.background#0b0f1a
editor.findMatchBackground#1f5c0f55
editor.findMatchHighlightBackground#1f5c0f33
editor.foreground#a8b2c4
editor.inactiveSelectionBackground#2c3a5a55
editor.lineHighlightBackground#141a2a
editor.selectionBackground#2c3a5a99
editor.selectionHighlightBackground#2c3a5a55
editor.wordHighlightBackground#2c3a5a44
editorBracketHighlight.foreground1#1f5c0f
editorBracketHighlight.foreground2#7ad0ff
editorBracketHighlight.foreground3#c0e87d
editorBracketHighlight.foreground4#6fe3c4
editorBracketHighlight.foreground5#7ce85e
editorBracketHighlight.foreground6#9ade4a
editorBracketMatch.background#1f5c0f22
editorBracketMatch.border#1f5c0f88
editorCursor.foreground#7ce85e
editorGroup.border#2a3350
editorGroupHeader.border#2a3350
editorGroupHeader.tabsBackground#0a0e18
editorGroupHeader.tabsBorder#2a3350
editorGutter.addedBackground#6fe3c4
editorGutter.background#0b0f1a
editorGutter.deletedBackground#ff6b81
editorGutter.modifiedBackground#7ad0ff
editorHoverWidget.background#111726
editorHoverWidget.border#2a3350
editorIndentGuide.activeBackground1#4a5578
editorIndentGuide.background1#242c40
editorLineNumber.activeForeground#7ab85f
editorLineNumber.foreground#3a4256
editorRuler.foreground#242c40
editorSuggestWidget.background#111726
editorSuggestWidget.border#2a3350
editorSuggestWidget.highlightForeground#1f5c0f
editorSuggestWidget.selectedBackground#2a3350
editorWhitespace.foreground#232b3d
editorWidget.background#111726
editorWidget.border#2a3350
errorForeground#ff6b81
focusBorder#1f5c0f66
foreground#a8b2c4
gitDecoration.addedResourceForeground#6fe3c4
gitDecoration.deletedResourceForeground#ff6b81
gitDecoration.ignoredResourceForeground#3a4256
gitDecoration.modifiedResourceForeground#7ad0ff
gitDecoration.untrackedResourceForeground#7ce85e
input.background#111726
input.border#2a3350
input.foreground#c9d3e0
input.placeholderForeground#3a4256
list.activeSelectionBackground#2a3350
list.activeSelectionForeground#7ce85e
list.focusBackground#2a3350
list.highlightForeground#1f5c0f
list.hoverBackground#141a2a
list.inactiveSelectionBackground#141a2a
panel.background#0a0e18
panel.border#2a3350
panelSection.border#2a3350
panelSectionHeader.background#0a0e18
panelTitle.activeBorder#1f5c0f
panelTitle.activeForeground#7ce85e
panelTitle.inactiveForeground#6b7590
pickerGroup.border#2a3350
pickerGroup.foreground#7ad0ff
progressBar.background#1f5c0f
quickInput.background#111726
quickInput.foreground#c9d3e0
quickInputList.focusBackground#2a3350
quickInputList.focusForeground#7ce85e
quickInputTitle.background#111726
scrollbarSlider.activeBackground#2c3a5acc
scrollbarSlider.background#1c233466
scrollbarSlider.hoverBackground#2c3a5a99
sideBar.background#0a0e18
sideBar.border#2a3350
sideBar.foreground#8891a5
sideBarSectionHeader.background#0a0e18
sideBarSectionHeader.border#2a3350
sideBarTitle.foreground#c9d3e0
statusBar.background#080b13
statusBar.border#080b13
statusBar.debuggingBackground#ff6b81
statusBar.debuggingForeground#0b0f1a
statusBar.foreground#8891a5
statusBar.noFolderBackground#080b13
tab.activeBackground#0b0f1a
tab.activeBorderTop#1f5c0f
tab.activeForeground#7ce85e
tab.border#080b13
tab.inactiveBackground#0a0e18
tab.inactiveForeground#6b7590
terminal.ansiBlack#0b0f1a
terminal.ansiBlue#7ad0ff
terminal.ansiBrightBlack#3a4256
terminal.ansiBrightBlue#9adcff
terminal.ansiBrightCyan#8ff0d6
terminal.ansiBrightGreen#8ff0d6
terminal.ansiBrightMagenta#d8f0a8
terminal.ansiBrightRed#c0f07a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#a8f08f
terminal.ansiCyan#6fe3c4
terminal.ansiGreen#6fe3c4
terminal.ansiMagenta#c0e87d
terminal.ansiRed#ff6b81
terminal.ansiWhite#a8b2c4
terminal.ansiYellow#7ce85e
terminal.background#0a0e18
terminal.foreground#a8b2c4
titleBar.activeBackground#080b13
titleBar.activeForeground#c9d3e0
titleBar.border#2a3350
titleBar.inactiveBackground#080b13
titleBar.inactiveForeground#4d5872

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#9ade4a	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#4fae3e	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#c0e87d	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#9ade4a	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#4fae3e	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#9ade4a	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#4fae3e	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#c0e87d	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#9ade4a	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#4fae3e	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline

VS Code preview

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

City Night — City Night Violet

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#080b13
activityBar.border#2a3350
activityBar.foreground#a97fd6
activityBar.inactiveForeground#4d5872
activityBarBadge.background#3a1166
activityBarBadge.foreground#d9c2ee
badge.background#7ad0ff
badge.foreground#0b0f1a
button.background#3a1166
button.foreground#d9c2ee
button.hoverBackground#2a0c4e
checkbox.background#111726
checkbox.border#6b7590
checkbox.foreground#b98aff
checkbox.selectBackground#111726
checkbox.selectBorder#b98aff
descriptionForeground#8891a5
diffEditor.insertedTextBackground#6fe3c422
diffEditor.removedTextBackground#ff6b8122
dropdown.background#111726
dropdown.border#2a3350
editor.background#0b0f1a
editor.findMatchBackground#3a116655
editor.findMatchHighlightBackground#3a116633
editor.foreground#a8b2c4
editor.inactiveSelectionBackground#2c3a5a55
editor.lineHighlightBackground#141a2a
editor.selectionBackground#2c3a5a99
editor.selectionHighlightBackground#2c3a5a55
editor.wordHighlightBackground#2c3a5a44
editorBracketHighlight.foreground1#3a1166
editorBracketHighlight.foreground2#7ad0ff
editorBracketHighlight.foreground3#e0aeff
editorBracketHighlight.foreground4#6fe3c4
editorBracketHighlight.foreground5#b98aff
editorBracketHighlight.foreground6#c65eff
editorBracketMatch.background#3a116622
editorBracketMatch.border#3a116688
editorCursor.foreground#b98aff
editorGroup.border#2a3350
editorGroupHeader.border#2a3350
editorGroupHeader.tabsBackground#0a0e18
editorGroupHeader.tabsBorder#2a3350
editorGutter.addedBackground#6fe3c4
editorGutter.background#0b0f1a
editorGutter.deletedBackground#ff6b81
editorGutter.modifiedBackground#7ad0ff
editorHoverWidget.background#111726
editorHoverWidget.border#2a3350
editorIndentGuide.activeBackground1#4a5578
editorIndentGuide.background1#242c40
editorLineNumber.activeForeground#a97fd6
editorLineNumber.foreground#3a4256
editorRuler.foreground#242c40
editorSuggestWidget.background#111726
editorSuggestWidget.border#2a3350
editorSuggestWidget.highlightForeground#3a1166
editorSuggestWidget.selectedBackground#2a3350
editorWhitespace.foreground#232b3d
editorWidget.background#111726
editorWidget.border#2a3350
errorForeground#ff6b81
focusBorder#3a116666
foreground#a8b2c4
gitDecoration.addedResourceForeground#6fe3c4
gitDecoration.deletedResourceForeground#ff6b81
gitDecoration.ignoredResourceForeground#3a4256
gitDecoration.modifiedResourceForeground#7ad0ff
gitDecoration.untrackedResourceForeground#b98aff
input.background#111726
input.border#2a3350
input.foreground#c9d3e0
input.placeholderForeground#3a4256
list.activeSelectionBackground#2a3350
list.activeSelectionForeground#b98aff
list.focusBackground#2a3350
list.highlightForeground#3a1166
list.hoverBackground#141a2a
list.inactiveSelectionBackground#141a2a
panel.background#0a0e18
panel.border#2a3350
panelSection.border#2a3350
panelSectionHeader.background#0a0e18
panelTitle.activeBorder#3a1166
panelTitle.activeForeground#b98aff
panelTitle.inactiveForeground#6b7590
pickerGroup.border#2a3350
pickerGroup.foreground#7ad0ff
progressBar.background#3a1166
quickInput.background#111726
quickInput.foreground#c9d3e0
quickInputList.focusBackground#2a3350
quickInputList.focusForeground#b98aff
quickInputTitle.background#111726
scrollbarSlider.activeBackground#2c3a5acc
scrollbarSlider.background#1c233466
scrollbarSlider.hoverBackground#2c3a5a99
sideBar.background#0a0e18
sideBar.border#2a3350
sideBar.foreground#8891a5
sideBarSectionHeader.background#0a0e18
sideBarSectionHeader.border#2a3350
sideBarTitle.foreground#c9d3e0
statusBar.background#080b13
statusBar.border#080b13
statusBar.debuggingBackground#ff6b81
statusBar.debuggingForeground#0b0f1a
statusBar.foreground#8891a5
statusBar.noFolderBackground#080b13
tab.activeBackground#0b0f1a
tab.activeBorderTop#3a1166
tab.activeForeground#b98aff
tab.border#080b13
tab.inactiveBackground#0a0e18
tab.inactiveForeground#6b7590
terminal.ansiBlack#0b0f1a
terminal.ansiBlue#7ad0ff
terminal.ansiBrightBlack#3a4256
terminal.ansiBrightBlue#9adcff
terminal.ansiBrightCyan#8ff0d6
terminal.ansiBrightGreen#8ff0d6
terminal.ansiBrightMagenta#ecd0ff
terminal.ansiBrightRed#d98aff
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#cfaeff
terminal.ansiCyan#6fe3c4
terminal.ansiGreen#6fe3c4
terminal.ansiMagenta#e0aeff
terminal.ansiRed#ff6b81
terminal.ansiWhite#a8b2c4
terminal.ansiYellow#b98aff
terminal.background#0a0e18
terminal.foreground#a8b2c4
titleBar.activeBackground#080b13
titleBar.activeForeground#c9d3e0
titleBar.border#2a3350
titleBar.inactiveBackground#080b13
titleBar.inactiveForeground#4d5872

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#c65eff	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#9d5ee0	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#e0aeff	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#c65eff	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#9d5ee0	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline
—	#a8b2c4	—
comment, punctuation.definition.comment	#4d5872	italic
string, string.quoted, string.template	#d9b57a	—
constant.numeric, constant.language, constant.character, constant.other	#6fe3c4	—
keyword, keyword.control, storage, storage.type, storage.modifier	#c65eff	—
keyword.operator	#8a97b8	—
entity.name.function, support.function, meta.function-call	#9d5ee0	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#6bacd4	—
variable, variable.other	#a8b2c4	—
variable.parameter	#e0aeff	—
variable.other.property, meta.object-literal.key, entity.other.attribute-name	#9adcff	—
entity.name.tag	#c65eff	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#5c6788	—
markup.heading	#9d5ee0	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#7ad0ff	—
invalid, invalid.illegal	#ff6b81	underline