Visqode Theme

Name: Visqode Theme
Author: Abdulla al mahin

Publisher: Abdulla al mahinThemes in package: 4

A minimal, monochromatic dark theme family designed for modern software engineering.

Open in VS Code GitHub

Color themes

VS Code preview

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

Visqode Theme — Visqode 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.activeBackground#ffffff16
activityBar.activeBorder#40c8e8
activityBar.background#060a0e
activityBar.border#1a1e24
activityBar.foreground#a0b8c8
activityBar.inactiveForeground#90a8b8
activityBarBadge.background#40c8e8
activityBarBadge.foreground#080c10
badge.background#40c8e8
badge.foreground#080c10
button.background#40c8e8
button.foreground#080c10
button.hoverBackground#40c8e8
debugIcon.breakpointForeground#e07080
debugIcon.pauseForeground#e0b060
debugIcon.startForeground#50e0c0
debugIcon.stopForeground#e07080
descriptionForeground#90a8b8
diffEditor.border#1a1e24
diffEditor.insertedLineBackground#50e0c01a
diffEditor.insertedTextBackground#50e0c01a
diffEditor.removedLineBackground#e070801a
diffEditor.removedTextBackground#e070801a
disabledForeground#405868
dropdown.background#12161c
dropdown.border#262c34
dropdown.foreground#dce8f0
editor.background#0c1016
editor.findMatchBackground#40c8e845
editor.findMatchHighlightBackground#40c8e845
editor.foreground#dce8f0
editor.hoverHighlightBackground#ffffff0e
editor.inactiveSelectionBackground#ffffff12
editor.lineHighlightBackground#ffffff0c
editor.rangeHighlightBackground#ffffff12
editor.selectionBackground#40c8e82a
editor.selectionHighlightBackground#ffffff12
editor.wordHighlightBackground#ffffff12
editor.wordHighlightStrongBackground#40c8e82a
editorBracketMatch.background#ffffff1e
editorBracketMatch.border#40c8e880
editorCodeLens.foreground#90a8b8
editorCursor.foreground#40c8e8
editorError.foreground#e07080
editorGroup.background#0a0e12
editorGroup.border#1a1e24
editorGroupHeader.noTabsBackground#0c1016
editorGroupHeader.tabsBackground#060a0e
editorGroupHeader.tabsBorder#1a1e24
editorGutter.addedBackground#50e0c0
editorGutter.background#0c1016
editorGutter.deletedBackground#e07080
editorGutter.modifiedBackground#e0b060
editorHint.foreground#60d8f0
editorHoverWidget.background#12161c
editorHoverWidget.border#262c34
editorIndentGuide.activeBackground1#3a4450
editorIndentGuide.background1#1a1e24
editorInfo.foreground#40c8e8
editorLightBulb.foreground#60d8f0
editorLineNumber.activeForeground#40c8e8
editorLineNumber.foreground#4a5868
editorOverviewRuler.addedForeground#50e0c0
editorOverviewRuler.deletedForeground#e07080
editorOverviewRuler.errorForeground#e07080
editorOverviewRuler.infoForeground#40c8e8
editorOverviewRuler.modifiedForeground#e0b060
editorOverviewRuler.warningForeground#e0b060
editorPane.background#0c1016
editorRuler.foreground#1a1e24
editorSuggestWidget.background#12161c
editorSuggestWidget.border#262c34
editorSuggestWidget.foreground#dce8f0
editorSuggestWidget.highlightForeground#40c8e8
editorSuggestWidget.selectedBackground#ffffff1c
editorWarning.foreground#e0b060
editorWhitespace.foreground#2a323c
editorWidget.background#12161c
editorWidget.border#262c34
errorForeground#e07080
focusBorder#40c8e880
foreground#dce8f0
gitDecoration.addedResourceForeground#50e0c0
gitDecoration.conflictingResourceForeground#e0b060
gitDecoration.deletedResourceForeground#e07080
gitDecoration.modifiedResourceForeground#e0b060
gitDecoration.renamedResourceForeground#a090ff
gitDecoration.untrackedResourceForeground#50e0c0
icon.foreground#a0b8c8
input.background#00000000
input.border#262c34
input.foreground#dce8f0
input.placeholderForeground#607888
inputOption.activeBackground#ffffff1c
inputOption.activeBorder#40c8e880
inputOption.activeForeground#40c8e8
list.activeSelectionBackground#ffffff1c
list.activeSelectionForeground#dce8f0
list.errorForeground#e07080
list.focusBackground#ffffff16
list.focusForeground#dce8f0
list.highlightForeground#40c8e8
list.hoverBackground#ffffff0e
list.hoverForeground#dce8f0
list.inactiveSelectionBackground#ffffff1c
list.inactiveSelectionForeground#dce8f0
list.warningForeground#e0b060
merge.currentContentBackground#40c8e81a
merge.currentHeaderBackground#40c8e81a
merge.incomingContentBackground#50e0c01a
merge.incomingHeaderBackground#50e0c01a
minimap.background#0c1016
minimapSlider.activeBackground#ffffff2c
minimapSlider.background#ffffff18
minimapSlider.hoverBackground#ffffff2c
notificationCenterHeader.background#0a0e14
notifications.background#12161c
notifications.foreground#dce8f0
notificationsErrorIcon.foreground#e07080
notificationsInfoIcon.foreground#40c8e8
notificationsWarningIcon.foreground#e0b060
panel.background#0a0e14
panel.border#1a1e24
panelInput.border#262c34
panelTitle.activeForeground#dce8f0
panelTitle.inactiveForeground#90a8b8
peekViewEditor.background#0c1016
peekViewEditor.matchHighlightBackground#40c8e845
peekViewResult.background#0a0e14
peekViewResult.selectionBackground#ffffff1c
peekViewTitle.background#0c1016
problemsErrorIcon.foreground#e07080
problemsInfoIcon.foreground#40c8e8
problemsWarningIcon.foreground#e0b060
scrollbarSlider.activeBackground#ffffff2c
scrollbarSlider.background#ffffff18
scrollbarSlider.hoverBackground#ffffff2c
selection.background#ffffff1c
sideBar.background#0a0e14
sideBar.border#1a1e24
sideBar.foreground#dce8f0
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#1a1e24
sideBarSectionHeader.foreground#dce8f0
sideBarTitle.foreground#dce8f0
statusBar.background#060a0e
statusBar.border#1a1e24
statusBar.foreground#90a8b8
tab.activeBackground#0c1016
tab.activeBorder#40c8e8
tab.activeForeground#dce8f0
tab.border#1a1e24
tab.hoverBackground#ffffff0e
tab.hoverForeground#dce8f0
tab.inactiveBackground#060a0e
tab.inactiveForeground#90a8b8
tab.unfocusedActiveBorder#40c8e880
terminal.ansiBlack#12161c
terminal.ansiBlue#80b0ff
terminal.ansiBrightBlack#405868
terminal.ansiBrightBlue#a0c8ff
terminal.ansiBrightCyan#60d8f0
terminal.ansiBrightGreen#70f0d0
terminal.ansiBrightMagenta#c0b0ff
terminal.ansiBrightRed#f0a0a8
terminal.ansiBrightWhite#f0f8ff
terminal.ansiBrightYellow#f0c880
terminal.ansiCyan#40c8e8
terminal.ansiGreen#50e0c0
terminal.ansiMagenta#a090ff
terminal.ansiRed#e07080
terminal.ansiWhite#a0b8c8
terminal.ansiYellow#e0b060
terminal.background#060a0e
terminal.foreground#dce8f0
terminalCursor.foreground#40c8e8
textLink.activeForeground#40c8e8
textLink.foreground#40c8e8
textPreformat.background#0a0e12
textPreformat.foreground#dce8f0
titleBar.activeBackground#060a0e
titleBar.activeForeground#dce8f0
titleBar.border#1a1e24
titleBar.inactiveBackground#080c10
titleBar.inactiveForeground#90a8b8
toolbar.activeBackground#ffffff16
toolbar.background#0c1016
toolbar.hoverBackground#ffffff0e
tree.inactiveIndentGuidesStroke#1a1e24
tree.indentGuidesStroke#1a1e24
tree.tableColumnsBorder#1a1e24
tree.tableOddRowsBackground#ffffff0e
widget.border#262c34
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name	#a090ff	—
constant.language.boolean	#e090c0	—
comment	#607888	italic
comment.block.documentation	#607888	italic
constant.language, constant	#a090ff	—
entity.name.function, entity.name.function.constructor	#40c8e8	—
meta.embedded	#dce8f0	—
markup.italic	#dce8f0	italic
markup.bold	#dce8f0	bold
entity.name.type.enum	#a090ff	—
entity.name.function, support.function	#40c8e8	—
markup.other.hint	#60d8f0	italic
keyword, storage.type, storage.modifier	#80b0ff	—
entity.name.label	#a090ff	—
markup.underline.link	#40c8e8	underline
string.other.link	#40c8e8	—
constant.numeric	#e090c0	—
keyword.operator	#80c0d8	—
comment, meta.suggestion	#607888	italic
meta.preprocessor	#a090ff	—
source	#dce8f0	—
variable.other.property, support.type.property-name	#50e0c0	—
punctuation	#90a8b8	—
punctuation.bracket	#90a8b8	—
punctuation.separator, punctuation.terminator	#90a8b8	—
punctuation.definition.list	#90a8b8	—
punctuation.definition	#90a8b8	—
string	#60d8f0	—
constant.character.escape	#a090ff	—
string.regexp	#60d8f0	—
string.other	#a090ff	—
constant.other.symbol	#a090ff	—
entity.name.tag	#40c8e8	—
markup.raw, string.unquoted	#60d8f0	—
entity.name.section	#dce8f0	bold
entity.name.type, support.type	#80b0ff	—
entity.name.type.interface	#80b0ff	italic
entity.other.inherited-class	#80b0ff	italic
variable	#dce8f0	—
variable.other.member	#50e0c0	—
variable.parameter	#e090c0	italic
variable.language	#40c8e8	italic
entity.other.inherited-class, entity.name.type.variant	#dce8f0	—

VS Code preview

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

Visqode Theme — Visqode Dark

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.activeBackground#ffffff16
activityBar.activeBorder#7eb6ff
activityBar.background#08080c
activityBar.border#1e1e28
activityBar.foreground#a8a8be
activityBar.inactiveForeground#9a9ab0
activityBarBadge.background#7eb6ff
activityBarBadge.foreground#0d0d0f
badge.background#7eb6ff
badge.foreground#0d0d0f
button.background#7eb6ff
button.foreground#0d0d0f
button.hoverBackground#7eb6ff
debugIcon.breakpointForeground#f87171
debugIcon.pauseForeground#e5b567
debugIcon.startForeground#6ecb9a
debugIcon.stopForeground#f87171
descriptionForeground#9a9ab0
diffEditor.border#1e1e28
diffEditor.insertedLineBackground#6ecb9a1a
diffEditor.insertedTextBackground#6ecb9a1a
diffEditor.removedLineBackground#f871711a
diffEditor.removedTextBackground#f871711a
disabledForeground#4a4a5c
dropdown.background#161628
dropdown.border#2a2a36
dropdown.foreground#e0e0ec
editor.background#111117
editor.findMatchBackground#60a5fa45
editor.findMatchHighlightBackground#60a5fa45
editor.foreground#e0e0ec
editor.hoverHighlightBackground#ffffff0e
editor.inactiveSelectionBackground#ffffff12
editor.lineHighlightBackground#ffffff0c
editor.rangeHighlightBackground#ffffff12
editor.selectionBackground#60a5fa2a
editor.selectionHighlightBackground#ffffff12
editor.wordHighlightBackground#ffffff12
editor.wordHighlightStrongBackground#60a5fa2a
editorBracketMatch.background#ffffff1e
editorBracketMatch.border#60a5fa80
editorCodeLens.foreground#9a9ab0
editorCursor.foreground#7eb6ff
editorError.foreground#f87171
editorGroup.background#0a0a0e
editorGroup.border#1e1e28
editorGroupHeader.noTabsBackground#111117
editorGroupHeader.tabsBackground#08080c
editorGroupHeader.tabsBorder#1e1e28
editorGutter.addedBackground#6ecb9a
editorGutter.background#111117
editorGutter.deletedBackground#f87171
editorGutter.modifiedBackground#e5b567
editorHint.foreground#38bdf8
editorHoverWidget.background#161628
editorHoverWidget.border#2a2a36
editorIndentGuide.activeBackground1#3e3e50
editorIndentGuide.background1#1e1e28
editorInfo.foreground#60a5fa
editorLightBulb.foreground#38bdf8
editorLineNumber.activeForeground#7eb6ff
editorLineNumber.foreground#55556a
editorOverviewRuler.addedForeground#6ecb9a
editorOverviewRuler.deletedForeground#f87171
editorOverviewRuler.errorForeground#f87171
editorOverviewRuler.infoForeground#60a5fa
editorOverviewRuler.modifiedForeground#e5b567
editorOverviewRuler.warningForeground#e5b567
editorPane.background#111117
editorRuler.foreground#1e1e28
editorSuggestWidget.background#161628
editorSuggestWidget.border#2a2a36
editorSuggestWidget.foreground#e0e0ec
editorSuggestWidget.highlightForeground#7eb6ff
editorSuggestWidget.selectedBackground#ffffff1c
editorWarning.foreground#e5b567
editorWhitespace.foreground#2e2e3a
editorWidget.background#161628
editorWidget.border#2a2a36
errorForeground#f87171
focusBorder#60a5fa80
foreground#e0e0ec
gitDecoration.addedResourceForeground#6ecb9a
gitDecoration.conflictingResourceForeground#e5b567
gitDecoration.deletedResourceForeground#f87171
gitDecoration.modifiedResourceForeground#e5b567
gitDecoration.renamedResourceForeground#a78bfa
gitDecoration.untrackedResourceForeground#6ecb9a
icon.foreground#a8a8be
input.background#00000000
input.border#2a2a36
input.foreground#e0e0ec
input.placeholderForeground#6a6a80
inputOption.activeBackground#ffffff1c
inputOption.activeBorder#60a5fa80
inputOption.activeForeground#7eb6ff
list.activeSelectionBackground#ffffff1c
list.activeSelectionForeground#e0e0ec
list.errorForeground#f87171
list.focusBackground#ffffff16
list.focusForeground#e0e0ec
list.highlightForeground#7eb6ff
list.hoverBackground#ffffff0e
list.hoverForeground#e0e0ec
list.inactiveSelectionBackground#ffffff1c
list.inactiveSelectionForeground#e0e0ec
list.warningForeground#e5b567
merge.currentContentBackground#60a5fa1a
merge.currentHeaderBackground#60a5fa1a
merge.incomingContentBackground#6ecb9a1a
merge.incomingHeaderBackground#6ecb9a1a
minimap.background#111117
minimapSlider.activeBackground#ffffff2c
minimapSlider.background#ffffff18
minimapSlider.hoverBackground#ffffff2c
notificationCenterHeader.background#0d0d14
notifications.background#161628
notifications.foreground#e0e0ec
notificationsErrorIcon.foreground#f87171
notificationsInfoIcon.foreground#60a5fa
notificationsWarningIcon.foreground#e5b567
panel.background#0d0d14
panel.border#1e1e28
panelInput.border#2a2a36
panelTitle.activeForeground#e0e0ec
panelTitle.inactiveForeground#9a9ab0
peekViewEditor.background#111117
peekViewEditor.matchHighlightBackground#60a5fa45
peekViewResult.background#0d0d14
peekViewResult.selectionBackground#ffffff1c
peekViewTitle.background#111117
problemsErrorIcon.foreground#f87171
problemsInfoIcon.foreground#60a5fa
problemsWarningIcon.foreground#e5b567
scrollbarSlider.activeBackground#ffffff2c
scrollbarSlider.background#ffffff18
scrollbarSlider.hoverBackground#ffffff2c
selection.background#ffffff1c
sideBar.background#0d0d14
sideBar.border#1e1e28
sideBar.foreground#e0e0ec
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#1e1e28
sideBarSectionHeader.foreground#e0e0ec
sideBarTitle.foreground#e0e0ec
statusBar.background#08080c
statusBar.border#1e1e28
statusBar.foreground#9a9ab0
tab.activeBackground#111117
tab.activeBorder#7eb6ff
tab.activeForeground#e0e0ec
tab.border#1e1e28
tab.hoverBackground#ffffff0e
tab.hoverForeground#e0e0ec
tab.inactiveBackground#08080c
tab.inactiveForeground#9a9ab0
tab.unfocusedActiveBorder#60a5fa80
terminal.ansiBlack#161628
terminal.ansiBlue#60a5fa
terminal.ansiBrightBlack#4a4a5c
terminal.ansiBrightBlue#93c5fd
terminal.ansiBrightCyan#7dd3fc
terminal.ansiBrightGreen#8edeb4
terminal.ansiBrightMagenta#c4b5fd
terminal.ansiBrightRed#fca5a5
terminal.ansiBrightWhite#f4f4fc
terminal.ansiBrightYellow#f0d080
terminal.ansiCyan#38bdf8
terminal.ansiGreen#6ecb9a
terminal.ansiMagenta#a78bfa
terminal.ansiRed#f87171
terminal.ansiWhite#a8a8be
terminal.ansiYellow#e5b567
terminal.background#08080c
terminal.foreground#e0e0ec
terminalCursor.foreground#7eb6ff
textLink.activeForeground#7eb6ff
textLink.foreground#7eb6ff
textPreformat.background#0a0a0e
textPreformat.foreground#e0e0ec
titleBar.activeBackground#08080c
titleBar.activeForeground#e0e0ec
titleBar.border#1e1e28
titleBar.inactiveBackground#0d0d0f
titleBar.inactiveForeground#9a9ab0
toolbar.activeBackground#ffffff16
toolbar.background#111117
toolbar.hoverBackground#ffffff0e
tree.inactiveIndentGuidesStroke#1e1e28
tree.indentGuidesStroke#1e1e28
tree.tableColumnsBorder#1e1e28
tree.tableOddRowsBackground#ffffff0e
widget.border#2a2a36
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name	#e89eff	—
constant.language.boolean	#fa87b9	—
comment	#6e6e86	italic
comment.block.documentation	#6e6e86	italic
constant.language, constant	#e89eff	—
entity.name.function, entity.name.function.constructor	#7eb6ff	—
meta.embedded	#e0e0ec	—
markup.italic	#e0e0ec	italic
markup.bold	#e0e0ec	bold
entity.name.type.enum	#e89eff	—
entity.name.function, support.function	#7eb6ff	—
markup.other.hint	#38bdf8	italic
keyword, storage.type, storage.modifier	#ff6394	—
entity.name.label	#e89eff	—
markup.underline.link	#38bdf8	underline
string.other.link	#38bdf8	—
constant.numeric	#fa87b9	—
keyword.operator	#a0c4fc	—
comment, meta.suggestion	#6a6a80	italic
meta.preprocessor	#c4b5fd	—
source	#e0e0ec	—
variable.other.property, support.type.property-name	#99ffd6	—
punctuation	#9a9ab0	—
punctuation.bracket	#9a9ab0	—
punctuation.separator, punctuation.terminator	#9a9ab0	—
punctuation.definition.list	#9a9ab0	—
punctuation.definition	#9a9ab0	—
string	#5ec8f0	—
constant.character.escape	#c4b5fd	—
string.regexp	#5ec8f0	—
string.other	#c4b5fd	—
constant.other.symbol	#c4b5fd	—
entity.name.tag	#60a5fa	—
markup.raw, string.unquoted	#5ec8f0	—
entity.name.section	#e0e0ec	bold
entity.name.type, support.type	#ae99ff	—
entity.name.type.interface	#ae99ff	italic
entity.other.inherited-class	#ae99ff	italic
variable	#e0e0ec	—
variable.other.member	#99ffd6	—
variable.parameter	#fa87b9	italic
variable.language	#7eb6ff	italic
entity.other.inherited-class, entity.name.type.variant	#e0e0ec	—

VS Code preview

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

Visqode Theme — Visqode Rose

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.activeBackground#ffffff16
activityBar.activeBorder#ff7aa8
activityBar.background#0a080c
activityBar.border#1e1a20
activityBar.foreground#b0a0b0
activityBar.inactiveForeground#a090a0
activityBarBadge.background#ff7aa8
activityBarBadge.foreground#0c0a0e
badge.background#ff7aa8
badge.foreground#0c0a0e
button.background#ff7aa8
button.foreground#0c0a0e
button.hoverBackground#ff7aa8
debugIcon.breakpointForeground#f07080
debugIcon.pauseForeground#e5b567
debugIcon.startForeground#70c8a0
debugIcon.stopForeground#f07080
descriptionForeground#a090a0
diffEditor.border#1e1a20
diffEditor.insertedLineBackground#70c8a01a
diffEditor.insertedTextBackground#70c8a01a
diffEditor.removedLineBackground#f070801a
diffEditor.removedTextBackground#f070801a
disabledForeground#504050
dropdown.background#161218
dropdown.border#2c2630
dropdown.foreground#e8e0e8
editor.background#100e14
editor.findMatchBackground#ff7aa845
editor.findMatchHighlightBackground#ff7aa845
editor.foreground#e8e0e8
editor.hoverHighlightBackground#ffffff0e
editor.inactiveSelectionBackground#ffffff12
editor.lineHighlightBackground#ffffff0c
editor.rangeHighlightBackground#ffffff12
editor.selectionBackground#ff7aa82a
editor.selectionHighlightBackground#ffffff12
editor.wordHighlightBackground#ffffff12
editor.wordHighlightStrongBackground#ff7aa82a
editorBracketMatch.background#ffffff1e
editorBracketMatch.border#ff7aa880
editorCodeLens.foreground#a090a0
editorCursor.foreground#ff7aa8
editorError.foreground#f07080
editorGroup.background#0e0a10
editorGroup.border#1e1a20
editorGroupHeader.noTabsBackground#100e14
editorGroupHeader.tabsBackground#0a080c
editorGroupHeader.tabsBorder#1e1a20
editorGutter.addedBackground#70c8a0
editorGutter.background#100e14
editorGutter.deletedBackground#f07080
editorGutter.modifiedBackground#e5b567
editorHint.foreground#70d0f0
editorHoverWidget.background#161218
editorHoverWidget.border#2c2630
editorIndentGuide.activeBackground1#403840
editorIndentGuide.background1#1e1a20
editorInfo.foreground#70a0f0
editorLightBulb.foreground#70d0f0
editorLineNumber.activeForeground#ff7aa8
editorLineNumber.foreground#58505a
editorOverviewRuler.addedForeground#70c8a0
editorOverviewRuler.deletedForeground#f07080
editorOverviewRuler.errorForeground#f07080
editorOverviewRuler.infoForeground#70a0f0
editorOverviewRuler.modifiedForeground#e5b567
editorOverviewRuler.warningForeground#e5b567
editorPane.background#100e14
editorRuler.foreground#1e1a20
editorSuggestWidget.background#161218
editorSuggestWidget.border#2c2630
editorSuggestWidget.foreground#e8e0e8
editorSuggestWidget.highlightForeground#ff7aa8
editorSuggestWidget.selectedBackground#ffffff1c
editorWarning.foreground#e5b567
editorWhitespace.foreground#2e2830
editorWidget.background#161218
editorWidget.border#2c2630
errorForeground#f07080
focusBorder#ff7aa880
foreground#e8e0e8
gitDecoration.addedResourceForeground#70c8a0
gitDecoration.conflictingResourceForeground#e5b567
gitDecoration.deletedResourceForeground#f07080
gitDecoration.modifiedResourceForeground#e5b567
gitDecoration.renamedResourceForeground#c4a0ff
gitDecoration.untrackedResourceForeground#70c8a0
icon.foreground#b0a0b0
input.background#00000000
input.border#2c2630
input.foreground#e8e0e8
input.placeholderForeground#706070
inputOption.activeBackground#ffffff1c
inputOption.activeBorder#ff7aa880
inputOption.activeForeground#ff7aa8
list.activeSelectionBackground#ffffff1c
list.activeSelectionForeground#e8e0e8
list.errorForeground#f07080
list.focusBackground#ffffff16
list.focusForeground#e8e0e8
list.highlightForeground#ff7aa8
list.hoverBackground#ffffff0e
list.hoverForeground#e8e0e8
list.inactiveSelectionBackground#ffffff1c
list.inactiveSelectionForeground#e8e0e8
list.warningForeground#e5b567
merge.currentContentBackground#70a0f01a
merge.currentHeaderBackground#70a0f01a
merge.incomingContentBackground#70c8a01a
merge.incomingHeaderBackground#70c8a01a
minimap.background#100e14
minimapSlider.activeBackground#ffffff2c
minimapSlider.background#ffffff18
minimapSlider.hoverBackground#ffffff2c
notificationCenterHeader.background#0e0c12
notifications.background#161218
notifications.foreground#e8e0e8
notificationsErrorIcon.foreground#f07080
notificationsInfoIcon.foreground#70a0f0
notificationsWarningIcon.foreground#e5b567
panel.background#0e0c12
panel.border#1e1a20
panelInput.border#2c2630
panelTitle.activeForeground#e8e0e8
panelTitle.inactiveForeground#a090a0
peekViewEditor.background#100e14
peekViewEditor.matchHighlightBackground#ff7aa845
peekViewResult.background#0e0c12
peekViewResult.selectionBackground#ffffff1c
peekViewTitle.background#100e14
problemsErrorIcon.foreground#f07080
problemsInfoIcon.foreground#70a0f0
problemsWarningIcon.foreground#e5b567
scrollbarSlider.activeBackground#ffffff2c
scrollbarSlider.background#ffffff18
scrollbarSlider.hoverBackground#ffffff2c
selection.background#ffffff1c
sideBar.background#0e0c12
sideBar.border#1e1a20
sideBar.foreground#e8e0e8
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#1e1a20
sideBarSectionHeader.foreground#e8e0e8
sideBarTitle.foreground#e8e0e8
statusBar.background#0a080c
statusBar.border#1e1a20
statusBar.foreground#a090a0
tab.activeBackground#100e14
tab.activeBorder#ff7aa8
tab.activeForeground#e8e0e8
tab.border#1e1a20
tab.hoverBackground#ffffff0e
tab.hoverForeground#e8e0e8
tab.inactiveBackground#0a080c
tab.inactiveForeground#a090a0
tab.unfocusedActiveBorder#ff7aa880
terminal.ansiBlack#161218
terminal.ansiBlue#70a0f0
terminal.ansiBrightBlack#504050
terminal.ansiBrightBlue#90c0ff
terminal.ansiBrightCyan#90e0ff
terminal.ansiBrightGreen#90e0b8
terminal.ansiBrightMagenta#e8b0ff
terminal.ansiBrightRed#f0a0a8
terminal.ansiBrightWhite#f8f0f8
terminal.ansiBrightYellow#f0d080
terminal.ansiCyan#70d0f0
terminal.ansiGreen#70c8a0
terminal.ansiMagenta#c4a0ff
terminal.ansiRed#f07080
terminal.ansiWhite#b0a0b0
terminal.ansiYellow#e5b567
terminal.background#0a080c
terminal.foreground#e8e0e8
terminalCursor.foreground#ff7aa8
textLink.activeForeground#70d0f0
textLink.foreground#ff7aa8
textPreformat.background#0e0a10
textPreformat.foreground#e8e0e8
titleBar.activeBackground#0a080c
titleBar.activeForeground#e8e0e8
titleBar.border#1e1a20
titleBar.inactiveBackground#0c0a0e
titleBar.inactiveForeground#a090a0
toolbar.activeBackground#ffffff16
toolbar.background#100e14
toolbar.hoverBackground#ffffff0e
tree.inactiveIndentGuidesStroke#1e1a20
tree.indentGuidesStroke#1e1a20
tree.tableColumnsBorder#1e1a20
tree.tableOddRowsBackground#ffffff0e
widget.border#2c2630
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name	#e8b0ff	—
constant.language.boolean	#ff9cc0	—
comment	#706070	italic
comment.block.documentation	#706070	italic
constant.language, constant	#e8b0ff	—
entity.name.function, entity.name.function.constructor	#70a0f0	—
meta.embedded	#e8e0e8	—
markup.italic	#e8e0e8	italic
markup.bold	#e8e0e8	bold
entity.name.type.enum	#e8b0ff	—
entity.name.function, support.function	#70a0f0	—
markup.other.hint	#70d0f0	italic
keyword, storage.type, storage.modifier	#ff7aa8	—
entity.name.label	#e8b0ff	—
markup.underline.link	#70d0f0	underline
string.other.link	#70d0f0	—
constant.numeric	#ff9cc0	—
keyword.operator	#b0a0d0	—
comment, meta.suggestion	#706070	italic
meta.preprocessor	#c4a0ff	—
source	#e8e0e8	—
variable.other.property, support.type.property-name	#80e0c0	—
punctuation	#a090a0	—
punctuation.bracket	#a090a0	—
punctuation.separator, punctuation.terminator	#a090a0	—
punctuation.definition.list	#a090a0	—
punctuation.definition	#a090a0	—
string	#70d0f0	—
constant.character.escape	#c4a0ff	—
string.regexp	#70d0f0	—
string.other	#c4a0ff	—
constant.other.symbol	#c4a0ff	—
entity.name.tag	#ff7aa8	—
markup.raw, string.unquoted	#70d0f0	—
entity.name.section	#e8e0e8	bold
entity.name.type, support.type	#c4a0ff	—
entity.name.type.interface	#c4a0ff	italic
entity.other.inherited-class	#c4a0ff	italic
variable	#e8e0e8	—
variable.other.member	#80e0c0	—
variable.parameter	#ff9cc0	italic
variable.language	#70a0f0	italic
entity.other.inherited-class, entity.name.type.variant	#e8e0e8	—

VS Code preview

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

Visqode Theme — Visqode 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.activeBackground#ffffff16
activityBar.activeBorder#b080ff
activityBar.background#080610
activityBar.border#1c1a24
activityBar.foreground#a8a0c0
activityBar.inactiveForeground#9890b0
activityBarBadge.background#b080ff
activityBarBadge.foreground#0a0810
badge.background#b080ff
badge.foreground#0a0810
button.background#b080ff
button.foreground#0a0810
button.hoverBackground#b080ff
debugIcon.breakpointForeground#f07090
debugIcon.pauseForeground#e5b567
debugIcon.startForeground#70c8a8
debugIcon.stopForeground#f07090
descriptionForeground#9890b0
diffEditor.border#1c1a24
diffEditor.insertedLineBackground#70c8a81a
diffEditor.insertedTextBackground#70c8a81a
diffEditor.removedLineBackground#f070901a
diffEditor.removedTextBackground#f070901a
disabledForeground#484060
dropdown.background#14121c
dropdown.border#2a2634
dropdown.foreground#e4e0f0
editor.background#0e0c16
editor.findMatchBackground#b080ff45
editor.findMatchHighlightBackground#b080ff45
editor.foreground#e4e0f0
editor.hoverHighlightBackground#ffffff0e
editor.inactiveSelectionBackground#ffffff12
editor.lineHighlightBackground#ffffff0c
editor.rangeHighlightBackground#ffffff12
editor.selectionBackground#b080ff2a
editor.selectionHighlightBackground#ffffff12
editor.wordHighlightBackground#ffffff12
editor.wordHighlightStrongBackground#b080ff2a
editorBracketMatch.background#ffffff1e
editorBracketMatch.border#b080ff80
editorCodeLens.foreground#9890b0
editorCursor.foreground#b080ff
editorError.foreground#f07090
editorGroup.background#0c0a12
editorGroup.border#1c1a24
editorGroupHeader.noTabsBackground#0e0c16
editorGroupHeader.tabsBackground#080610
editorGroupHeader.tabsBorder#1c1a24
editorGutter.addedBackground#70c8a8
editorGutter.background#0e0c16
editorGutter.deletedBackground#f07090
editorGutter.modifiedBackground#e5b567
editorHint.foreground#60d0e0
editorHoverWidget.background#14121c
editorHoverWidget.border#2a2634
editorIndentGuide.activeBackground1#3e3850
editorIndentGuide.background1#1c1a24
editorInfo.foreground#80b0ff
editorLightBulb.foreground#60d0e0
editorLineNumber.activeForeground#b080ff
editorLineNumber.foreground#524a68
editorOverviewRuler.addedForeground#70c8a8
editorOverviewRuler.deletedForeground#f07090
editorOverviewRuler.errorForeground#f07090
editorOverviewRuler.infoForeground#80b0ff
editorOverviewRuler.modifiedForeground#e5b567
editorOverviewRuler.warningForeground#e5b567
editorPane.background#0e0c16
editorRuler.foreground#1c1a24
editorSuggestWidget.background#14121c
editorSuggestWidget.border#2a2634
editorSuggestWidget.foreground#e4e0f0
editorSuggestWidget.highlightForeground#b080ff
editorSuggestWidget.selectedBackground#ffffff1c
editorWarning.foreground#e5b567
editorWhitespace.foreground#2c2838
editorWidget.background#14121c
editorWidget.border#2a2634
errorForeground#f07090
focusBorder#b080ff80
foreground#e4e0f0
gitDecoration.addedResourceForeground#70c8a8
gitDecoration.conflictingResourceForeground#e5b567
gitDecoration.deletedResourceForeground#f07090
gitDecoration.modifiedResourceForeground#e5b567
gitDecoration.renamedResourceForeground#c8a0ff
gitDecoration.untrackedResourceForeground#70c8a8
icon.foreground#a8a0c0
input.background#00000000
input.border#2a2634
input.foreground#e4e0f0
input.placeholderForeground#686080
inputOption.activeBackground#ffffff1c
inputOption.activeBorder#b080ff80
inputOption.activeForeground#b080ff
list.activeSelectionBackground#ffffff1c
list.activeSelectionForeground#e4e0f0
list.errorForeground#f07090
list.focusBackground#ffffff16
list.focusForeground#e4e0f0
list.highlightForeground#b080ff
list.hoverBackground#ffffff0e
list.hoverForeground#e4e0f0
list.inactiveSelectionBackground#ffffff1c
list.inactiveSelectionForeground#e4e0f0
list.warningForeground#e5b567
merge.currentContentBackground#80b0ff1a
merge.currentHeaderBackground#80b0ff1a
merge.incomingContentBackground#70c8a81a
merge.incomingHeaderBackground#70c8a81a
minimap.background#0e0c16
minimapSlider.activeBackground#ffffff2c
minimapSlider.background#ffffff18
minimapSlider.hoverBackground#ffffff2c
notificationCenterHeader.background#0c0a14
notifications.background#14121c
notifications.foreground#e4e0f0
notificationsErrorIcon.foreground#f07090
notificationsInfoIcon.foreground#80b0ff
notificationsWarningIcon.foreground#e5b567
panel.background#0c0a14
panel.border#1c1a24
panelInput.border#2a2634
panelTitle.activeForeground#e4e0f0
panelTitle.inactiveForeground#9890b0
peekViewEditor.background#0e0c16
peekViewEditor.matchHighlightBackground#b080ff45
peekViewResult.background#0c0a14
peekViewResult.selectionBackground#ffffff1c
peekViewTitle.background#0e0c16
problemsErrorIcon.foreground#f07090
problemsInfoIcon.foreground#80b0ff
problemsWarningIcon.foreground#e5b567
scrollbarSlider.activeBackground#ffffff2c
scrollbarSlider.background#ffffff18
scrollbarSlider.hoverBackground#ffffff2c
selection.background#ffffff1c
sideBar.background#0c0a14
sideBar.border#1c1a24
sideBar.foreground#e4e0f0
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#1c1a24
sideBarSectionHeader.foreground#e4e0f0
sideBarTitle.foreground#e4e0f0
statusBar.background#080610
statusBar.border#1c1a24
statusBar.foreground#9890b0
tab.activeBackground#0e0c16
tab.activeBorder#b080ff
tab.activeForeground#e4e0f0
tab.border#1c1a24
tab.hoverBackground#ffffff0e
tab.hoverForeground#e4e0f0
tab.inactiveBackground#080610
tab.inactiveForeground#9890b0
tab.unfocusedActiveBorder#b080ff80
terminal.ansiBlack#14121c
terminal.ansiBlue#80b0ff
terminal.ansiBrightBlack#484060
terminal.ansiBrightBlue#a0c8ff
terminal.ansiBrightCyan#80e0f0
terminal.ansiBrightGreen#90e0c0
terminal.ansiBrightMagenta#c8a0ff
terminal.ansiBrightRed#f0a0b0
terminal.ansiBrightWhite#f4f0ff
terminal.ansiBrightYellow#f0d080
terminal.ansiCyan#60d0e0
terminal.ansiGreen#70c8a8
terminal.ansiMagenta#b080ff
terminal.ansiRed#f07090
terminal.ansiWhite#a8a0c0
terminal.ansiYellow#e5b567
terminal.background#080610
terminal.foreground#e4e0f0
terminalCursor.foreground#b080ff
textLink.activeForeground#80b0ff
textLink.foreground#b080ff
textPreformat.background#0c0a12
textPreformat.foreground#e4e0f0
titleBar.activeBackground#080610
titleBar.activeForeground#e4e0f0
titleBar.border#1c1a24
titleBar.inactiveBackground#0a0810
titleBar.inactiveForeground#9890b0
toolbar.activeBackground#ffffff16
toolbar.background#0e0c16
toolbar.hoverBackground#ffffff0e
tree.inactiveIndentGuidesStroke#1c1a24
tree.indentGuidesStroke#1c1a24
tree.tableColumnsBorder#1c1a24
tree.tableOddRowsBackground#ffffff0e
widget.border#2a2634
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.other.attribute-name	#c8a0ff	—
constant.language.boolean	#f070b0	—
comment	#686080	italic
comment.block.documentation	#686080	italic
constant.language, constant	#c8a0ff	—
entity.name.function, entity.name.function.constructor	#80b0ff	—
meta.embedded	#e4e0f0	—
markup.italic	#e4e0f0	italic
markup.bold	#e4e0f0	bold
entity.name.type.enum	#c8a0ff	—
entity.name.function, support.function	#80b0ff	—
markup.other.hint	#60d0e0	italic
keyword, storage.type, storage.modifier	#b080ff	—
entity.name.label	#c8a0ff	—
markup.underline.link	#80b0ff	underline
string.other.link	#80b0ff	—
constant.numeric	#f070b0	—
keyword.operator	#a090d0	—
comment, meta.suggestion	#686080	italic
meta.preprocessor	#c8a0ff	—
source	#e4e0f0	—
variable.other.property, support.type.property-name	#70d8c0	—
punctuation	#9890b0	—
punctuation.bracket	#9890b0	—
punctuation.separator, punctuation.terminator	#9890b0	—
punctuation.definition.list	#9890b0	—
punctuation.definition	#9890b0	—
string	#60d0e0	—
constant.character.escape	#c8a0ff	—
string.regexp	#60d0e0	—
string.other	#c8a0ff	—
constant.other.symbol	#c8a0ff	—
entity.name.tag	#b080ff	—
markup.raw, string.unquoted	#60d0e0	—
entity.name.section	#e4e0f0	bold
entity.name.type, support.type	#c8a0ff	—
entity.name.type.interface	#c8a0ff	italic
entity.other.inherited-class	#c8a0ff	italic
variable	#e4e0f0	—
variable.other.member	#70d8c0	—
variable.parameter	#f070b0	italic
variable.language	#80b0ff	italic
entity.other.inherited-class, entity.name.type.variant	#e4e0f0	—