Dracula's Vial

Name: Dracula's Vial
Author: sevnth

Publisher: sevnthThemes in package: 7

An alchemical Dracula fork infused with glowing cyan, potion purple, and 7 chromatic elixir editions.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dracula's Vial — Dracula's Vial - Ice & Fire (Glacial Cyan & Purple Flame)

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#0f141d
activityBar.activeBorder#00d2ff
activityBar.background#080c12
activityBar.foreground#ffffff
activityBar.inactiveForeground#4d6b8a
activityBarBadge.background#9254de
activityBarBadge.foreground#ffffff
badge.background#9254de
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#00d2ff
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#4d6b8a
breadcrumbPicker.background#080c12
button.background#9254de
button.foreground#ffffff
button.hoverBackground#9254dedd
button.secondaryBackground#1b2c40
button.secondaryForeground#ffffff
button.secondaryHoverBackground#1b2c40cc
charts.blue#00d2ff
charts.green#36cfc9
charts.orange#ff7a45
charts.purple#9254de
charts.red#ff4d4f
charts.yellow#ffc53d
commandCenter.activeBackground#1b2c40
commandCenter.activeBorder#00d2ff
commandCenter.background#080c12
commandCenter.border#1b2c4088
commandCenter.foreground#ffffff
contrastBorder#00000000
debugToolBar.background#080c12
diffEditor.diagonalFill#1b2c4040
diffEditor.insertedLineBackground#36cfc922
diffEditor.insertedTextBackground#36cfc933
diffEditor.removedLineBackground#ff4d4f22
diffEditor.removedTextBackground#ff4d4f33
dropdown.background#080c12
dropdown.border#1b2c40
dropdown.foreground#ffffff
editor.background#0f141d
editor.findMatchBackground#ff7a4544
editor.findMatchBorder#ff7a45
editor.findMatchHighlightBackground#00d2ff33
editor.findMatchHighlightBorder#00d2ff66
editor.foldingRangeBackground#1b2c4022
editor.foreground#f0f8ff
editor.hoverHighlightBackground#00d2ff22
editor.lineHighlightBackground#1b2c4066
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#9254de15
editor.selectionBackground#1b2c40cc
editor.selectionHighlightBackground#1b2c4066
editor.selectionHighlightBorder#00d2ff44
editor.wordHighlightBackground#00d2ff22
editor.wordHighlightBorder#00d2ff66
editor.wordHighlightStrongBackground#9254de22
editor.wordHighlightStrongBorder#9254de66
editorBracketHighlight.foreground1#9254de
editorBracketHighlight.foreground2#00d2ff
editorBracketHighlight.foreground3#ff7a45
editorBracketHighlight.foreground4#36cfc9
editorBracketHighlight.foreground5#f759ab
editorBracketHighlight.foreground6#ffc53d
editorBracketMatch.background#1b2c4055
editorBracketMatch.border#00d2ff
editorCodeLens.foreground#4d6b8a
editorCursor.foreground#00d2ff
editorError.foreground#ff4d4f
editorGroup.border#080c12
editorGroup.dropBackground#9254de22
editorGroupHeader.noTabsBackground#0f141d
editorGroupHeader.tabsBackground#080c12
editorGutter.addedBackground#36cfc9
editorGutter.background#0f141d
editorGutter.deletedBackground#ff4d4f
editorGutter.modifiedBackground#ff7a45
editorHoverWidget.background#080c12
editorHoverWidget.border#1b2c40
editorIndentGuide.activeBackground1#4d6b8aaa
editorIndentGuide.background1#1b2c4066
editorInfo.foreground#00d2ff
editorInlayHint.background#1b2c4088
editorInlayHint.foreground#4d6b8acc
editorInlayHint.parameterBackground#1b2c4088
editorInlayHint.parameterForeground#ff7a45cc
editorInlayHint.typeBackground#1b2c4088
editorInlayHint.typeForeground#36cfc9cc
editorLineNumber.activeForeground#00d2ff
editorLineNumber.foreground#4d6b8a88
editorLink.activeForeground#00d2ff
editorMarkerNavigation.background#080c12
editorOverviewRuler.addedForeground#36cfc9
editorOverviewRuler.border#080c12
editorOverviewRuler.bracketMatchForeground#00d2ff
editorOverviewRuler.errorForeground#ff4d4f
editorOverviewRuler.findMatchForeground#ff7a45
editorOverviewRuler.infoForeground#00d2ff
editorOverviewRuler.modifiedForeground#ff7a45
editorOverviewRuler.rangeHighlightForeground#9254de
editorOverviewRuler.selectionHighlightForeground#1b2c40
editorOverviewRuler.warningForeground#ff7a45
editorOverviewRuler.wordHighlightForeground#00d2ff
editorRuler.foreground#1b2c4044
editorSuggestWidget.background#080c12
editorSuggestWidget.border#1b2c40
editorSuggestWidget.foreground#f0f8ff
editorSuggestWidget.highlightForeground#00d2ff
editorSuggestWidget.selectedBackground#1b2c40
editorSuggestWidget.selectedForeground#00d2ff
editorWarning.foreground#ff7a45
editorWhitespace.foreground#1b2c4055
editorWidget.background#080c12
editorWidget.border#00d2ff55
errorForeground#ff4d4f
focusBorder#00d2ff
foreground#f0f8ff
gitDecoration.addedResourceForeground#36cfc9
gitDecoration.conflictingResourceForeground#ff7a45
gitDecoration.deletedResourceForeground#ff4d4f
gitDecoration.ignoredResourceForeground#4d6b8a66
gitDecoration.modifiedResourceForeground#ff7a45
gitDecoration.stageDeletedResourceForeground#ff4d4f
gitDecoration.stageModifiedResourceForeground#00d2ff
gitDecoration.untrackedResourceForeground#00d2ff
icon.foreground#ffffff
input.background#1b2c40
input.border#1b2c40
input.foreground#ffffff
input.placeholderForeground#4d6b8a
inputOption.activeBackground#9254de33
inputOption.activeBorder#00d2ff
inputOption.activeForeground#ffffff
inputValidation.errorBackground#ff4d4f22
inputValidation.errorBorder#ff4d4f
inputValidation.infoBackground#00d2ff22
inputValidation.infoBorder#00d2ff
inputValidation.warningBackground#ff7a4522
inputValidation.warningBorder#ff7a45
list.activeSelectionBackground#1b2c40
list.activeSelectionForeground#00d2ff
list.activeSelectionIconForeground#00d2ff
list.dropBackground#9254de22
list.focusBackground#1b2c4088
list.focusForeground#ffffff
list.focusHighlightForeground#00d2ff
list.highlightForeground#00d2ff
list.hoverBackground#1b2c4055
list.hoverForeground#ffffff
list.inactiveSelectionBackground#1b2c4055
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#080c12
listFilterWidget.noMatchesOutline#ff4d4f
listFilterWidget.outline#00d2ff
menu.background#080c12
menu.border#1b2c40
menu.foreground#ffffff
menu.selectionBackground#1b2c40
menu.selectionForeground#00d2ff
menu.separatorBackground#1b2c40
menubar.selectionBackground#1b2c40
menubar.selectionForeground#00d2ff
minimap.errorHighlight#ff4d4f
minimap.findMatchHighlight#ff7a45
minimap.selectionHighlight#1b2c40
minimap.warningHighlight#ff7a45
minimapGutter.addedBackground#36cfc9
minimapGutter.deletedBackground#ff4d4f
minimapGutter.modifiedBackground#ff7a45
minimapSlider.activeBackground#00d2ff44
minimapSlider.background#1b2c4033
minimapSlider.hoverBackground#00d2ff22
notificationCenterHeader.background#080c12
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#00d2ff
notifications.background#080c12
notifications.border#00d2ff55
notifications.foreground#ffffff
notificationsErrorIcon.foreground#ff4d4f
notificationsInfoIcon.foreground#00d2ff
notificationsWarningIcon.foreground#ff7a45
panel.background#080c12
panel.border#1b2c4055
panelTitle.activeBorder#00d2ff
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#4d6b8a
peekView.border#00d2ff
peekViewEditor.background#0f141d
peekViewEditor.matchHighlightBackground#ff7a4544
peekViewEditorGutter.background#0f141d
peekViewResult.background#080c12
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#4d6b8a
peekViewResult.matchHighlightBackground#ff7a4544
peekViewResult.selectionBackground#1b2c40
peekViewResult.selectionForeground#00d2ff
peekViewTitle.background#080c12
peekViewTitleDescription.foreground#4d6b8a
peekViewTitleInfo.foreground#9254de
pickerGroup.border#00d2ff55
pickerGroup.foreground#00d2ff
progressBar.background#9254de
quickInput.background#080c12
quickInput.foreground#ffffff
quickInputList.focusBackground#1b2c40
quickInputTitle.background#080c12
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#00d2ff55
scrollbarSlider.background#1b2c4044
scrollbarSlider.hoverBackground#00d2ff33
selection.background#9254de44
sideBar.background#080c12
sideBar.border#00000000
sideBar.dropBackground#9254de22
sideBar.foreground#ffffff
sideBarSectionHeader.background#080c12
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#00d2ff
statusBar.background#080c12
statusBar.border#00000000
statusBar.debuggingBackground#9254de
statusBar.debuggingForeground#ffffff
statusBar.foreground#4d6b8a
statusBar.noFolderBackground#080c12
statusBar.noFolderForeground#4d6b8a
statusBarItem.activeBackground#1b2c40
statusBarItem.hoverBackground#1b2c4088
statusBarItem.prominentBackground#1b2c40
statusBarItem.prominentForeground#00d2ff
statusBarItem.prominentHoverBackground#1b2c40cc
statusBarItem.remoteBackground#9254de
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0f141d
tab.activeBorder#9254de
tab.activeBorderTop#00d2ff
tab.activeForeground#ffffff
tab.border#080c12
tab.hoverBackground#1b2c4088
tab.inactiveBackground#080c12
tab.inactiveForeground#4d6b8a
tab.unfocusedActiveBackground#0f141d
tab.unfocusedActiveBorder#9254de66
tab.unfocusedActiveBorderTop#00d2ff66
tab.unfocusedActiveForeground#f0f8ff99
tab.unfocusedInactiveForeground#4d6b8a66
terminal.ansiBlack#0f141d
terminal.ansiBlue#9254de
terminal.ansiBrightBlack#4d6b8a
terminal.ansiBrightBlue#9254de
terminal.ansiBrightCyan#00d2ff
terminal.ansiBrightGreen#36cfc9
terminal.ansiBrightMagenta#f759ab
terminal.ansiBrightRed#ff4d4f
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffc53d
terminal.ansiCyan#00d2ff
terminal.ansiGreen#36cfc9
terminal.ansiMagenta#9254de
terminal.ansiRed#ff4d4f
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffc53d
terminal.background#080c12
terminal.foreground#ffffff
terminal.selectionBackground#1b2c4099
terminalCursor.background#080c12
terminalCursor.foreground#00d2ff
textBlockQuote.background#080c12
textBlockQuote.border#9254de
textCodeBlock.background#080c12
textLink.activeForeground#00d2ff
textLink.foreground#00d2ff
textPreformat.foreground#ff7a45
textSeparator.foreground#1b2c40
titleBar.activeBackground#080c12
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#080c12
titleBar.inactiveForeground#4d6b8a
toolbar.activeBackground#1b2c40
toolbar.hoverBackground#1b2c4088
tree.indentGuidesStroke#1b2c4055
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block, comment.block.documentation, comment.line, comment.line.double-slash, comment.line.documentation, string.quoted.docstring	#4d6b8a	italic
keyword.type.go, keyword.type, keyword.declaration.type.go, keyword.declaration.type, keyword.declaration.struct.go, keyword.declaration.struct, keyword.declaration.interface.go, keyword.declaration.interface, storage.type.interface.ts, storage.type.interface.tsx, storage.type.interface.js, storage.type.interface.jsx, storage.type.type.ts, storage.type.type.tsx, storage.type.type.js, storage.type.enum.ts, storage.type.enum.tsx, storage.type.class.ts, storage.type.class.tsx, storage.type.class.js, storage.type.class.jsx, storage.type.struct.go, storage.type.interface.go, storage.type.type.go, storage.type.struct, storage.type.interface, storage.type.type, storage.type.enum, storage.type.class, storage.type.rust, storage.modifier.rust	#f759ab	—
storage.type.primitive.go, storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, storage.type.byte.go, storage.type.rune.go, storage.type.error.go, storage.type.map.go, storage.type.chan.go, storage.type.slice.go, storage.type.uint.go, storage.type.uint8.go, storage.type.uint16.go, storage.type.uint32.go, storage.type.uint64.go, storage.type.int.go, storage.type.int8.go, storage.type.int16.go, storage.type.int32.go, storage.type.int64.go, storage.type.float32.go, storage.type.float64.go, storage.type.complex64.go, storage.type.complex128.go, storage.type.uintptr.go, storage.type.primitive, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, support.type.primitive, support.type.builtin, support.type.python, support.type.rust, support.type.primitive.rust	#36cfc9	italic
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.go, entity.name.type.struct.go, entity.name.type.interface.go, entity.name.type.type.go, entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.class, support.type, support.class, support.type.go, support.class.react	#36cfc9	italic
variable.object.property, variable.other.property, variable.other.object.property, variable.other.member, variable.other.property.go, variable.other.member.go, entity.name.variable.field, entity.name.variable.field.go, entity.name.variable.field.ts, entity.name.variable.field.tsx, support.type.property-name, meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.other.declaration.struct.go, source.go meta.struct.declaration variable.other.declaration.go, source.go meta.struct.declaration variable.other.assignment.go, meta.struct.declaration.go variable.other.declaration.go, meta.struct.declaration.go variable.other.assignment.go, source.go meta.composite-literal.go variable.other.assignment.go, meta.composite-literal.go variable.other.assignment.go	#f759ab	—
variable.parameter, variable.parameter.function, variable.parameter.go, variable.parameter.ts, variable.parameter.tsx, variable.parameter.js, variable.parameter.jsx, variable.other.receiver.go, meta.parameters.go variable.other.declaration.go, meta.function.parameters.go variable.other.declaration.go, meta.receiver.go variable.other.declaration.go, variable.parameter.function.python, variable.language.special.self.python, variable.language.special.cls.python, variable.parameter.rust	#ffa940	italic
meta.struct.tag.go, entity.name.tag.go, meta.struct.tag.go string, meta.struct.tag.go string.quoted, string.quoted.raw.go, punctuation.definition.string.raw.go, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.xml	#ffa940	—
entity.name.function, entity.name.function.go, entity.name.function.ts, entity.name.function.tsx, entity.name.function.js, entity.name.function.jsx, entity.name.function.python, entity.name.function.rust, support.function, support.function.builtin, support.function.builtin.go, support.function.go, support.function.ts, support.function.tsx, meta.function-call, meta.function-call.go, meta.method-call	#00d2ff	—
entity.name.package, entity.name.package.go, entity.name.namespace, entity.name.module, support.other.namespace, support.other.namespace.use.go, support.other.package.use.go, support.package.go, support.module.go, variable.other.package.go, support.other.module, support.class.builtin	#00d2ff	—
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.trycatch, keyword.control.async, keyword.control.await, keyword.control.return, keyword.control.from, keyword.control.default, keyword.control.go, keyword.statement.go, keyword.import.go, keyword.package.go, keyword.function.go, keyword.function, keyword.var.go, keyword.const.go, keyword.other, keyword.other.rust, storage.type, storage.type.function, storage.type.function.ts, storage.type.function.tsx, storage.type.function.python, storage.type.class.python, storage.type.var, storage.type.let, storage.type.const	#9254de	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#ff7a45	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#ffc53d	—
constant.language, constant.language.boolean, constant.language.null, constant.language.nil, constant.language.nil.go, constant.language.true.go, constant.language.false.go, constant.language.undefined, constant.language.true, constant.language.false, constant.language.python	#ffc53d	bold
constant.other, variable.other.constant, variable.other.enummember	#ffc53d	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#00d2ff	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#00d2ff	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.address.go, keyword.operator.channel.go, entity.name.function.decorator, meta.decorator, punctuation.decorator	#9254de	—
variable, variable.other, variable.other.readwrite	#f0f8ff	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#f0f8ff	—
invalid, invalid.illegal	#ff4d4f	—

VS Code preview

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

Dracula's Vial — Dracula's Vial - Neon Synth (Hot Pink • Cyan • 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#1a1c29
activityBar.activeBorder#ff2a85
activityBar.background#12131c
activityBar.foreground#ffffff
activityBar.inactiveForeground#636987
activityBarBadge.background#ff2a85
activityBarBadge.foreground#ffffff
badge.background#ff2a85
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#00e5ff
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#636987
breadcrumbPicker.background#12131c
button.background#ff2a85
button.foreground#ffffff
button.hoverBackground#ff529f
button.secondaryBackground#232638
button.secondaryForeground#ffffff
button.secondaryHoverBackground#393e5c
charts.blue#00e5ff
charts.green#05ffa1
charts.orange#ff6b35
charts.purple#9d4edd
charts.red#ff2a85
charts.yellow#ffe600
commandCenter.activeBackground#232638
commandCenter.activeBorder#ff2a85
commandCenter.background#12131c
commandCenter.border#393e5c
commandCenter.foreground#ffffff
contrastBorder#12131c00
debugToolBar.background#12131c
diffEditor.diagonalFill#393e5c40
diffEditor.insertedLineBackground#05ffa122
diffEditor.insertedTextBackground#05ffa133
diffEditor.removedLineBackground#ff2a8522
diffEditor.removedTextBackground#ff2a8533
dropdown.background#12131c
dropdown.border#393e5c
dropdown.foreground#ffffff
editor.background#161824
editor.findMatchBackground#ff6b3544
editor.findMatchBorder#ff6b35
editor.findMatchHighlightBackground#00e5ff33
editor.findMatchHighlightBorder#00e5ff66
editor.foldingRangeBackground#393e5c22
editor.foreground#ffffff
editor.hoverHighlightBackground#00e5ff22
editor.lineHighlightBackground#23263888
editor.lineHighlightBorder#393e5c00
editor.rangeHighlightBackground#ff2a8515
editor.selectionBackground#393e5c99
editor.selectionHighlightBackground#393e5c55
editor.selectionHighlightBorder#ff2a8544
editor.wordHighlightBackground#00e5ff22
editor.wordHighlightBorder#00e5ff66
editor.wordHighlightStrongBackground#ff6b3522
editor.wordHighlightStrongBorder#ff6b3566
editorBracketHighlight.foreground1#9d4edd
editorBracketHighlight.foreground2#00e5ff
editorBracketHighlight.foreground3#ff6b35
editorBracketHighlight.foreground4#05ffa1
editorBracketHighlight.foreground5#ff2a85
editorBracketHighlight.foreground6#ffe600
editorBracketMatch.background#393e5c55
editorBracketMatch.border#00e5ff
editorCodeLens.foreground#636987
editorCursor.foreground#00e5ff
editorError.foreground#ff2a85
editorGroup.border#12131c
editorGroup.dropBackground#ff2a8522
editorGroupHeader.noTabsBackground#161824
editorGroupHeader.tabsBackground#12131c
editorGutter.addedBackground#05ffa1
editorGutter.background#161824
editorGutter.deletedBackground#ff2a85
editorGutter.modifiedBackground#ff6b35
editorHoverWidget.background#12131c
editorHoverWidget.border#393e5c
editorIndentGuide.activeBackground1#63698788
editorIndentGuide.background1#393e5c44
editorInfo.foreground#00e5ff
editorInlayHint.background#23263888
editorInlayHint.foreground#636987cc
editorInlayHint.parameterBackground#23263888
editorInlayHint.parameterForeground#ff6b35cc
editorInlayHint.typeBackground#23263888
editorInlayHint.typeForeground#05ffa1cc
editorLineNumber.activeForeground#00e5ff
editorLineNumber.foreground#63698777
editorLink.activeForeground#00e5ff
editorMarkerNavigation.background#12131c
editorOverviewRuler.addedForeground#05ffa1
editorOverviewRuler.border#12131c
editorOverviewRuler.bracketMatchForeground#00e5ff
editorOverviewRuler.errorForeground#ff2a85
editorOverviewRuler.findMatchForeground#ff6b35
editorOverviewRuler.infoForeground#00e5ff
editorOverviewRuler.modifiedForeground#ff6b35
editorOverviewRuler.rangeHighlightForeground#ff2a85
editorOverviewRuler.selectionHighlightForeground#393e5c
editorOverviewRuler.warningForeground#ff6b35
editorOverviewRuler.wordHighlightForeground#00e5ff
editorRuler.foreground#393e5c44
editorSuggestWidget.background#12131c
editorSuggestWidget.border#393e5c
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#00e5ff
editorSuggestWidget.selectedBackground#232638
editorSuggestWidget.selectedForeground#00e5ff
editorWarning.foreground#ff6b35
editorWhitespace.foreground#393e5c55
editorWidget.background#12131c
editorWidget.border#ff2a8555
errorForeground#ff2a85
focusBorder#ff2a85
foreground#ffffff
gitDecoration.addedResourceForeground#05ffa1
gitDecoration.conflictingResourceForeground#ff6b35
gitDecoration.deletedResourceForeground#ff2a85
gitDecoration.ignoredResourceForeground#63698766
gitDecoration.modifiedResourceForeground#ff6b35
gitDecoration.stageDeletedResourceForeground#ff2a85
gitDecoration.stageModifiedResourceForeground#00e5ff
gitDecoration.untrackedResourceForeground#00e5ff
icon.foreground#ffffff
input.background#232638
input.border#393e5c
input.foreground#ffffff
input.placeholderForeground#636987
inputOption.activeBackground#ff2a8533
inputOption.activeBorder#00e5ff
inputOption.activeForeground#ffffff
inputValidation.errorBackground#ff2a8522
inputValidation.errorBorder#ff2a85
inputValidation.infoBackground#00e5ff22
inputValidation.infoBorder#00e5ff
inputValidation.warningBackground#ff6b3522
inputValidation.warningBorder#ff6b35
list.activeSelectionBackground#232638
list.activeSelectionForeground#00e5ff
list.activeSelectionIconForeground#00e5ff
list.dropBackground#ff2a8522
list.focusBackground#23263888
list.focusForeground#ffffff
list.focusHighlightForeground#00e5ff
list.highlightForeground#00e5ff
list.hoverBackground#23263855
list.hoverForeground#ffffff
list.inactiveSelectionBackground#23263855
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#12131c
listFilterWidget.noMatchesOutline#ff2a85
listFilterWidget.outline#ff2a85
menu.background#12131c
menu.border#393e5c
menu.foreground#ffffff
menu.selectionBackground#232638
menu.selectionForeground#00e5ff
menu.separatorBackground#393e5c
menubar.selectionBackground#232638
menubar.selectionForeground#00e5ff
minimap.errorHighlight#ff2a85
minimap.findMatchHighlight#ff6b35
minimap.selectionHighlight#393e5c
minimap.warningHighlight#ff6b35
minimapGutter.addedBackground#05ffa1
minimapGutter.deletedBackground#ff2a85
minimapGutter.modifiedBackground#ff6b35
minimapSlider.activeBackground#ff2a8544
minimapSlider.background#393e5c33
minimapSlider.hoverBackground#ff2a8522
notificationCenterHeader.background#12131c
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#00e5ff
notifications.background#12131c
notifications.border#ff2a8555
notifications.foreground#ffffff
notificationsErrorIcon.foreground#ff2a85
notificationsInfoIcon.foreground#00e5ff
notificationsWarningIcon.foreground#ff6b35
panel.background#12131c
panel.border#393e5c55
panelTitle.activeBorder#ff2a85
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#636987
peekView.border#ff2a85
peekViewEditor.background#161824
peekViewEditor.matchHighlightBackground#ff6b3544
peekViewEditorGutter.background#161824
peekViewResult.background#12131c
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#636987
peekViewResult.matchHighlightBackground#ff6b3544
peekViewResult.selectionBackground#232638
peekViewResult.selectionForeground#00e5ff
peekViewTitle.background#12131c
peekViewTitleDescription.foreground#636987
peekViewTitleInfo.foreground#ff2a85
pickerGroup.border#ff2a8555
pickerGroup.foreground#00e5ff
progressBar.background#ff2a85
quickInput.background#12131c
quickInput.foreground#ffffff
quickInputList.focusBackground#232638
quickInputTitle.background#12131c
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#ff2a8555
scrollbarSlider.background#393e5c44
scrollbarSlider.hoverBackground#ff2a8533
selection.background#ff2a8544
sideBar.background#12131c
sideBar.border#12131c00
sideBar.dropBackground#ff2a8522
sideBar.foreground#ffffff
sideBarSectionHeader.background#12131c
sideBarSectionHeader.border#12131c00
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ff2a85
statusBar.background#12131c
statusBar.border#12131c00
statusBar.debuggingBackground#ff2a85
statusBar.debuggingForeground#ffffff
statusBar.foreground#636987
statusBar.noFolderBackground#12131c
statusBar.noFolderForeground#636987
statusBarItem.activeBackground#232638
statusBarItem.hoverBackground#23263888
statusBarItem.prominentBackground#232638
statusBarItem.prominentForeground#00e5ff
statusBarItem.prominentHoverBackground#393e5c
statusBarItem.remoteBackground#ff2a85
statusBarItem.remoteForeground#ffffff
tab.activeBackground#161824
tab.activeBorder#ff2a85
tab.activeBorderTop#00e5ff
tab.activeForeground#ffffff
tab.border#12131c
tab.hoverBackground#23263888
tab.inactiveBackground#12131c
tab.inactiveForeground#636987
tab.unfocusedActiveBackground#161824
tab.unfocusedActiveBorder#ff2a8566
tab.unfocusedActiveBorderTop#00e5ff66
tab.unfocusedActiveForeground#ffffff99
tab.unfocusedInactiveForeground#63698766
terminal.ansiBlack#161824
terminal.ansiBlue#9d4edd
terminal.ansiBrightBlack#636987
terminal.ansiBrightBlue#c77dff
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#05ffa1
terminal.ansiBrightMagenta#ff70a6
terminal.ansiBrightRed#ff2a85
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fff066
terminal.ansiCyan#00e5ff
terminal.ansiGreen#05ffa1
terminal.ansiMagenta#ff2a85
terminal.ansiRed#ff2a85
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffe600
terminal.background#12131c
terminal.foreground#ffffff
terminal.selectionBackground#393e5c99
terminalCursor.background#12131c
terminalCursor.foreground#00e5ff
textBlockQuote.background#12131c
textBlockQuote.border#ff2a85
textCodeBlock.background#12131c
textLink.activeForeground#a4ffff
textLink.foreground#00e5ff
textPreformat.foreground#ff6b35
textSeparator.foreground#393e5c
titleBar.activeBackground#12131c
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#12131c
titleBar.inactiveForeground#636987
toolbar.activeBackground#232638
toolbar.hoverBackground#23263888
tree.indentGuidesStroke#393e5c55
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block, comment.block.documentation, comment.line, comment.line.double-slash, comment.line.documentation, string.quoted.docstring	#636987	italic
keyword.type.go, keyword.type, keyword.declaration.type.go, keyword.declaration.type, keyword.declaration.struct.go, keyword.declaration.struct, keyword.declaration.interface.go, keyword.declaration.interface, storage.type.interface.ts, storage.type.interface.tsx, storage.type.interface.js, storage.type.interface.jsx, storage.type.type.ts, storage.type.type.tsx, storage.type.type.js, storage.type.enum.ts, storage.type.enum.tsx, storage.type.class.ts, storage.type.class.tsx, storage.type.class.js, storage.type.class.jsx, storage.type.struct.go, storage.type.interface.go, storage.type.type.go, storage.type.struct, storage.type.interface, storage.type.type, storage.type.enum, storage.type.class, storage.type.rust, storage.modifier.rust	#c77dff	—
storage.type.primitive.go, storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, storage.type.byte.go, storage.type.rune.go, storage.type.error.go, storage.type.map.go, storage.type.chan.go, storage.type.slice.go, storage.type.uint.go, storage.type.uint8.go, storage.type.uint16.go, storage.type.uint32.go, storage.type.uint64.go, storage.type.int.go, storage.type.int8.go, storage.type.int16.go, storage.type.int32.go, storage.type.int64.go, storage.type.float32.go, storage.type.float64.go, storage.type.complex64.go, storage.type.complex128.go, storage.type.uintptr.go, storage.type.primitive, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, support.type.primitive, support.type.builtin, support.type.python, support.type.rust, support.type.primitive.rust	#05ffa1	italic
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.go, entity.name.type.struct.go, entity.name.type.interface.go, entity.name.type.type.go, entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.class, support.type, support.class, support.type.go, support.class.react	#05ffa1	italic
variable.object.property, variable.other.property, variable.other.object.property, variable.other.member, variable.other.property.go, variable.other.member.go, entity.name.variable.field, entity.name.variable.field.go, entity.name.variable.field.ts, entity.name.variable.field.tsx, support.type.property-name, meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.other.declaration.struct.go, source.go meta.struct.declaration variable.other.declaration.go, source.go meta.struct.declaration variable.other.assignment.go, meta.struct.declaration.go variable.other.declaration.go, meta.struct.declaration.go variable.other.assignment.go, source.go meta.composite-literal.go variable.other.assignment.go, meta.composite-literal.go variable.other.assignment.go	#c77dff	—
variable.parameter, variable.parameter.function, variable.parameter.go, variable.parameter.ts, variable.parameter.tsx, variable.parameter.js, variable.parameter.jsx, variable.other.receiver.go, meta.parameters.go variable.other.declaration.go, meta.function.parameters.go variable.other.declaration.go, meta.receiver.go variable.other.declaration.go, variable.parameter.function.python, variable.language.special.self.python, variable.language.special.cls.python, variable.parameter.rust	#ff6b35	italic
meta.struct.tag.go, entity.name.tag.go, meta.struct.tag.go string, meta.struct.tag.go string.quoted, string.quoted.raw.go, punctuation.definition.string.raw.go, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.xml	#ff6b35	—
entity.name.function, entity.name.function.go, entity.name.function.ts, entity.name.function.tsx, entity.name.function.js, entity.name.function.jsx, entity.name.function.python, entity.name.function.rust, support.function, support.function.builtin, support.function.builtin.go, support.function.go, support.function.ts, support.function.tsx, meta.function-call, meta.function-call.go, meta.method-call	#00e5ff	—
entity.name.package, entity.name.package.go, entity.name.namespace, entity.name.module, support.other.namespace, support.other.namespace.use.go, support.other.package.use.go, support.package.go, support.module.go, variable.other.package.go, support.other.module, support.class.builtin	#00e5ff	—
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.trycatch, keyword.control.async, keyword.control.await, keyword.control.return, keyword.control.from, keyword.control.default, keyword.control.go, keyword.statement.go, keyword.import.go, keyword.package.go, keyword.function.go, keyword.function, keyword.var.go, keyword.const.go, keyword.other, keyword.other.rust, storage.type, storage.type.function, storage.type.function.ts, storage.type.function.tsx, storage.type.function.python, storage.type.class.python, storage.type.var, storage.type.let, storage.type.const	#ff2a85	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#ff6b35	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#ffe600	—
constant.language, constant.language.boolean, constant.language.null, constant.language.nil, constant.language.nil.go, constant.language.true.go, constant.language.false.go, constant.language.undefined, constant.language.true, constant.language.false, constant.language.python	#ffe600	bold
constant.other, variable.other.constant, variable.other.enummember	#ffe600	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#00e5ff	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#00e5ff	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.address.go, keyword.operator.channel.go, entity.name.function.decorator, meta.decorator, punctuation.decorator	#ff2a85	—
variable, variable.other, variable.other.readwrite	#ffffff	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#ffffff	—
invalid, invalid.illegal	#ff2a85	—

VS Code preview

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

Dracula's Vial — Dracula's Vial - Pure Triad (Cyan • Purple • Orange)

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#21222c
activityBar.activeBorder#bd93f9
activityBar.background#191a21
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#68759e
activityBarBadge.background#bd93f9
activityBarBadge.foreground#191a21
badge.background#bd93f9
badge.foreground#191a21
breadcrumb.activeSelectionForeground#8be9fd
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#68759e
breadcrumbPicker.background#191a21
button.background#bd93f9
button.foreground#191a21
button.hoverBackground#caa9fa
button.secondaryBackground#282a36
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#44475a
charts.blue#8be9fd
charts.green#50fa7b
charts.orange#ffb86c
charts.purple#bd93f9
charts.red#ff5555
charts.yellow#ffb86c
commandCenter.activeBackground#282a36
commandCenter.activeBorder#bd93f9
commandCenter.background#191a21
commandCenter.border#44475a
commandCenter.foreground#f8f8f2
contrastBorder#191a2100
debugToolBar.background#191a21
diffEditor.diagonalFill#44475a40
diffEditor.insertedLineBackground#50fa7b22
diffEditor.insertedTextBackground#50fa7b33
diffEditor.removedLineBackground#ff555522
diffEditor.removedTextBackground#ff555533
dropdown.background#191a21
dropdown.border#44475a
dropdown.foreground#f8f8f2
editor.background#21222c
editor.findMatchBackground#ffb86c44
editor.findMatchBorder#ffb86c
editor.findMatchHighlightBackground#8be9fd33
editor.findMatchHighlightBorder#8be9fd66
editor.foldingRangeBackground#44475a22
editor.foreground#f8f8f2
editor.hoverHighlightBackground#8be9fd22
editor.lineHighlightBackground#282a3688
editor.lineHighlightBorder#44475a00
editor.rangeHighlightBackground#bd93f915
editor.selectionBackground#44475a99
editor.selectionHighlightBackground#44475a55
editor.selectionHighlightBorder#bd93f944
editor.wordHighlightBackground#8be9fd22
editor.wordHighlightBorder#8be9fd66
editor.wordHighlightStrongBackground#ffb86c22
editor.wordHighlightStrongBorder#ffb86c66
editorBracketHighlight.foreground1#bd93f9
editorBracketHighlight.foreground2#8be9fd
editorBracketHighlight.foreground3#ffb86c
editorBracketHighlight.foreground4#f8f8f2
editorBracketHighlight.foreground5#caa9fa
editorBracketHighlight.foreground6#a4ffff
editorBracketMatch.background#44475a55
editorBracketMatch.border#8be9fd
editorCodeLens.foreground#68759e
editorCursor.foreground#8be9fd
editorError.foreground#ff5555
editorGroup.border#191a21
editorGroup.dropBackground#bd93f922
editorGroupHeader.noTabsBackground#21222c
editorGroupHeader.tabsBackground#191a21
editorGutter.addedBackground#50fa7b
editorGutter.background#21222c
editorGutter.deletedBackground#ff5555
editorGutter.modifiedBackground#ffb86c
editorHoverWidget.background#191a21
editorHoverWidget.border#44475a
editorIndentGuide.activeBackground1#68759e88
editorIndentGuide.background1#44475a44
editorInfo.foreground#8be9fd
editorInlayHint.background#282a3688
editorInlayHint.foreground#68759ecc
editorInlayHint.parameterBackground#282a3688
editorInlayHint.parameterForeground#ffb86ccc
editorInlayHint.typeBackground#282a3688
editorInlayHint.typeForeground#8be9fdcc
editorLineNumber.activeForeground#8be9fd
editorLineNumber.foreground#68759e77
editorLink.activeForeground#8be9fd
editorMarkerNavigation.background#191a21
editorOverviewRuler.addedForeground#50fa7b
editorOverviewRuler.border#191a21
editorOverviewRuler.bracketMatchForeground#8be9fd
editorOverviewRuler.errorForeground#ff5555
editorOverviewRuler.findMatchForeground#ffb86c
editorOverviewRuler.infoForeground#8be9fd
editorOverviewRuler.modifiedForeground#ffb86c
editorOverviewRuler.rangeHighlightForeground#bd93f9
editorOverviewRuler.selectionHighlightForeground#44475a
editorOverviewRuler.warningForeground#ffb86c
editorOverviewRuler.wordHighlightForeground#8be9fd
editorRuler.foreground#44475a44
editorSuggestWidget.background#191a21
editorSuggestWidget.border#44475a
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.highlightForeground#8be9fd
editorSuggestWidget.selectedBackground#282a36
editorSuggestWidget.selectedForeground#8be9fd
editorWarning.foreground#ffb86c
editorWhitespace.foreground#44475a55
editorWidget.background#191a21
editorWidget.border#bd93f955
errorForeground#ff5555
focusBorder#bd93f9
foreground#f8f8f2
gitDecoration.addedResourceForeground#50fa7b
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#68759e66
gitDecoration.modifiedResourceForeground#ffb86c
gitDecoration.stageDeletedResourceForeground#ff5555
gitDecoration.stageModifiedResourceForeground#8be9fd
gitDecoration.untrackedResourceForeground#8be9fd
icon.foreground#f8f8f2
input.background#282a36
input.border#44475a
input.foreground#f8f8f2
input.placeholderForeground#68759e
inputOption.activeBackground#bd93f933
inputOption.activeBorder#8be9fd
inputOption.activeForeground#f8f8f2
inputValidation.errorBackground#ff555522
inputValidation.errorBorder#ff5555
inputValidation.infoBackground#8be9fd22
inputValidation.infoBorder#8be9fd
inputValidation.warningBackground#ffb86c22
inputValidation.warningBorder#ffb86c
list.activeSelectionBackground#282a36
list.activeSelectionForeground#8be9fd
list.activeSelectionIconForeground#8be9fd
list.dropBackground#bd93f922
list.focusBackground#282a3688
list.focusForeground#f8f8f2
list.focusHighlightForeground#8be9fd
list.highlightForeground#8be9fd
list.hoverBackground#282a3655
list.hoverForeground#f8f8f2
list.inactiveSelectionBackground#282a3655
list.inactiveSelectionForeground#f8f8f2
listFilterWidget.background#191a21
listFilterWidget.noMatchesOutline#ff5555
listFilterWidget.outline#bd93f9
menu.background#191a21
menu.border#44475a
menu.foreground#f8f8f2
menu.selectionBackground#282a36
menu.selectionForeground#8be9fd
menu.separatorBackground#44475a
menubar.selectionBackground#282a36
menubar.selectionForeground#8be9fd
minimap.errorHighlight#ff5555
minimap.findMatchHighlight#ffb86c
minimap.selectionHighlight#44475a
minimap.warningHighlight#ffb86c
minimapGutter.addedBackground#50fa7b
minimapGutter.deletedBackground#ff5555
minimapGutter.modifiedBackground#ffb86c
minimapSlider.activeBackground#bd93f944
minimapSlider.background#44475a33
minimapSlider.hoverBackground#bd93f922
notificationCenterHeader.background#191a21
notificationCenterHeader.foreground#f8f8f2
notificationLink.foreground#8be9fd
notifications.background#191a21
notifications.border#bd93f955
notifications.foreground#f8f8f2
notificationsErrorIcon.foreground#ff5555
notificationsInfoIcon.foreground#8be9fd
notificationsWarningIcon.foreground#ffb86c
panel.background#191a21
panel.border#44475a55
panelTitle.activeBorder#bd93f9
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#68759e
peekView.border#bd93f9
peekViewEditor.background#21222c
peekViewEditor.matchHighlightBackground#ffb86c44
peekViewEditorGutter.background#21222c
peekViewResult.background#191a21
peekViewResult.fileForeground#f8f8f2
peekViewResult.lineForeground#68759e
peekViewResult.matchHighlightBackground#ffb86c44
peekViewResult.selectionBackground#282a36
peekViewResult.selectionForeground#8be9fd
peekViewTitle.background#191a21
peekViewTitleDescription.foreground#68759e
peekViewTitleInfo.foreground#bd93f9
pickerGroup.border#bd93f955
pickerGroup.foreground#8be9fd
progressBar.background#bd93f9
quickInput.background#191a21
quickInput.foreground#f8f8f2
quickInputList.focusBackground#282a36
quickInputTitle.background#191a21
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#bd93f955
scrollbarSlider.background#44475a44
scrollbarSlider.hoverBackground#bd93f933
selection.background#bd93f944
sideBar.background#191a21
sideBar.border#191a2100
sideBar.dropBackground#bd93f922
sideBar.foreground#f8f8f2
sideBarSectionHeader.background#191a21
sideBarSectionHeader.border#191a2100
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#bd93f9
statusBar.background#191a21
statusBar.border#191a2100
statusBar.debuggingBackground#bd93f9
statusBar.debuggingForeground#191a21
statusBar.foreground#68759e
statusBar.noFolderBackground#191a21
statusBar.noFolderForeground#68759e
statusBarItem.activeBackground#282a36
statusBarItem.hoverBackground#282a3688
statusBarItem.prominentBackground#282a36
statusBarItem.prominentForeground#8be9fd
statusBarItem.prominentHoverBackground#44475a
statusBarItem.remoteBackground#bd93f9
statusBarItem.remoteForeground#191a21
tab.activeBackground#21222c
tab.activeBorder#bd93f9
tab.activeBorderTop#8be9fd
tab.activeForeground#f8f8f2
tab.border#191a21
tab.hoverBackground#282a3688
tab.inactiveBackground#191a21
tab.inactiveForeground#68759e
tab.unfocusedActiveBackground#21222c
tab.unfocusedActiveBorder#bd93f966
tab.unfocusedActiveBorderTop#8be9fd66
tab.unfocusedActiveForeground#f8f8f299
tab.unfocusedInactiveForeground#68759e66
terminal.ansiBlack#21222c
terminal.ansiBlue#bd93f9
terminal.ansiBrightBlack#68759e
terminal.ansiBrightBlue#caa9fa
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#69ff94
terminal.ansiBrightMagenta#ff92d0
terminal.ansiBrightRed#ff6e6e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd29e
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#bd93f9
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#ffb86c
terminal.background#191a21
terminal.foreground#f8f8f2
terminal.selectionBackground#44475a99
terminalCursor.background#191a21
terminalCursor.foreground#8be9fd
textBlockQuote.background#191a21
textBlockQuote.border#bd93f9
textCodeBlock.background#191a21
textLink.activeForeground#a4ffff
textLink.foreground#8be9fd
textPreformat.foreground#ffb86c
textSeparator.foreground#44475a
titleBar.activeBackground#191a21
titleBar.activeForeground#f8f8f2
titleBar.inactiveBackground#191a21
titleBar.inactiveForeground#68759e
toolbar.activeBackground#282a36
toolbar.hoverBackground#282a3688
tree.indentGuidesStroke#44475a55
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, comment.block, comment.block.documentation, comment.line, comment.line.double-slash, comment.line.documentation, string.quoted.docstring	#68759e	italic
keyword.type.go, keyword.type, keyword.declaration.type.go, keyword.declaration.type, keyword.declaration.struct.go, keyword.declaration.struct, keyword.declaration.interface.go, keyword.declaration.interface, storage.type.interface.ts, storage.type.interface.tsx, storage.type.interface.js, storage.type.interface.jsx, storage.type.type.ts, storage.type.type.tsx, storage.type.type.js, storage.type.enum.ts, storage.type.enum.tsx, storage.type.class.ts, storage.type.class.tsx, storage.type.class.js, storage.type.class.jsx, storage.type.struct.go, storage.type.interface.go, storage.type.type.go, storage.type.struct, storage.type.interface, storage.type.type, storage.type.enum, storage.type.class, storage.type.rust, storage.modifier.rust	#ffb86c	—
storage.type.primitive.go, storage.type.numeric.go, storage.type.string.go, storage.type.boolean.go, storage.type.byte.go, storage.type.rune.go, storage.type.error.go, storage.type.map.go, storage.type.chan.go, storage.type.slice.go, storage.type.uint.go, storage.type.uint8.go, storage.type.uint16.go, storage.type.uint32.go, storage.type.uint64.go, storage.type.int.go, storage.type.int8.go, storage.type.int16.go, storage.type.int32.go, storage.type.int64.go, storage.type.float32.go, storage.type.float64.go, storage.type.complex64.go, storage.type.complex128.go, storage.type.uintptr.go, storage.type.primitive, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, support.type.primitive, support.type.builtin, support.type.python, support.type.rust, support.type.primitive.rust	#8be9fd	italic
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.go, entity.name.type.struct.go, entity.name.type.interface.go, entity.name.type.type.go, entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.class, support.type, support.class, support.type.go, support.class.react	#8be9fd	italic
variable.object.property, variable.other.property, variable.other.object.property, variable.other.member, variable.other.property.go, variable.other.member.go, entity.name.variable.field, entity.name.variable.field.go, entity.name.variable.field.ts, entity.name.variable.field.tsx, support.type.property-name, meta.object-literal.key, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.other.declaration.struct.go, source.go meta.struct.declaration variable.other.declaration.go, source.go meta.struct.declaration variable.other.assignment.go, meta.struct.declaration.go variable.other.declaration.go, meta.struct.declaration.go variable.other.assignment.go, source.go meta.composite-literal.go variable.other.assignment.go, meta.composite-literal.go variable.other.assignment.go	#ffb86c	—
variable.parameter, variable.parameter.function, variable.parameter.go, variable.parameter.ts, variable.parameter.tsx, variable.parameter.js, variable.parameter.jsx, variable.other.receiver.go, meta.parameters.go variable.other.declaration.go, meta.function.parameters.go variable.other.declaration.go, meta.receiver.go variable.other.declaration.go, variable.parameter.function.python, variable.language.special.self.python, variable.language.special.cls.python, variable.parameter.rust	#ffb86c	italic
meta.struct.tag.go, entity.name.tag.go, meta.struct.tag.go string, meta.struct.tag.go string.quoted, string.quoted.raw.go, punctuation.definition.string.raw.go, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.xml	#ffb86c	—
entity.name.function, entity.name.function.go, entity.name.function.ts, entity.name.function.tsx, entity.name.function.js, entity.name.function.jsx, entity.name.function.python, entity.name.function.rust, support.function, support.function.builtin, support.function.builtin.go, support.function.go, support.function.ts, support.function.tsx, meta.function-call, meta.function-call.go, meta.method-call	#8be9fd	—
entity.name.package, entity.name.package.go, entity.name.namespace, entity.name.module, support.other.namespace, support.other.namespace.use.go, support.other.package.use.go, support.package.go, support.module.go, variable.other.package.go, support.other.module, support.class.builtin	#8be9fd	—
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.trycatch, keyword.control.async, keyword.control.await, keyword.control.return, keyword.control.from, keyword.control.default, keyword.control.go, keyword.statement.go, keyword.import.go, keyword.package.go, keyword.function.go, keyword.function, keyword.var.go, keyword.const.go, keyword.other, keyword.other.rust, storage.type, storage.type.function, storage.type.function.ts, storage.type.function.tsx, storage.type.function.python, storage.type.class.python, storage.type.var, storage.type.let, storage.type.const	#bd93f9	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#ffb86c	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#ffb86c	—
constant.language, constant.language.boolean, constant.language.null, constant.language.nil, constant.language.nil.go, constant.language.true.go, constant.language.false.go, constant.language.undefined, constant.language.true, constant.language.false, constant.language.python	#ffb86c	bold
constant.other, variable.other.constant, variable.other.enummember	#ffb86c	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#8be9fd	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#8be9fd	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.address.go, keyword.operator.channel.go, entity.name.function.decorator, meta.decorator, punctuation.decorator	#bd93f9	—
variable, variable.other, variable.other.readwrite	#f8f8f2	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#f8f8f2	—
invalid, invalid.illegal	#ff5555	—