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 - Chromatic (Rich Full-Spectrum)

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#f1fa8c
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#50fa7b
editorBracketHighlight.foreground5#ff79c6
editorBracketHighlight.foreground6#f1fa8c
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#ff9e64cc
editorInlayHint.typeBackground#282a3688
editorInlayHint.typeForeground#50fa7bcc
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#ffffa5
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#f1fa8c
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	#ff79c6	—
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	#50fa7b	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	#50fa7b	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	#ff79c6	—
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	#ff9e64	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	#ff9e64	—
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	#f1fa8c	—
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	#f1fa8c	bold
constant.other, variable.other.constant, variable.other.enummember	#f1fa8c	—
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	—

VS Code preview

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

Dracula's Vial — Dracula's Vial - Cyber Lavender (Pastel Cyber)

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#151622
activityBar.activeBorder#67e8f9
activityBar.background#0f101a
activityBar.foreground#ffffff
activityBar.inactiveForeground#6b6f8a
activityBarBadge.background#d8b4fe
activityBarBadge.foreground#ffffff
badge.background#d8b4fe
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#67e8f9
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#6b6f8a
breadcrumbPicker.background#0f101a
button.background#d8b4fe
button.foreground#ffffff
button.hoverBackground#d8b4fedd
button.secondaryBackground#282a3d
button.secondaryForeground#ffffff
button.secondaryHoverBackground#282a3dcc
charts.blue#67e8f9
charts.green#86efac
charts.orange#fda4af
charts.purple#d8b4fe
charts.red#f87171
charts.yellow#fef08a
commandCenter.activeBackground#282a3d
commandCenter.activeBorder#67e8f9
commandCenter.background#0f101a
commandCenter.border#282a3d88
commandCenter.foreground#ffffff
contrastBorder#00000000
debugToolBar.background#0f101a
diffEditor.diagonalFill#282a3d40
diffEditor.insertedLineBackground#86efac22
diffEditor.insertedTextBackground#86efac33
diffEditor.removedLineBackground#f8717122
diffEditor.removedTextBackground#f8717133
dropdown.background#0f101a
dropdown.border#282a3d
dropdown.foreground#ffffff
editor.background#151622
editor.findMatchBackground#fda4af44
editor.findMatchBorder#fda4af
editor.findMatchHighlightBackground#67e8f933
editor.findMatchHighlightBorder#67e8f966
editor.foldingRangeBackground#282a3d22
editor.foreground#f8f7fc
editor.hoverHighlightBackground#67e8f922
editor.lineHighlightBackground#282a3d66
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#d8b4fe15
editor.selectionBackground#282a3dcc
editor.selectionHighlightBackground#282a3d66
editor.selectionHighlightBorder#67e8f944
editor.wordHighlightBackground#67e8f922
editor.wordHighlightBorder#67e8f966
editor.wordHighlightStrongBackground#d8b4fe22
editor.wordHighlightStrongBorder#d8b4fe66
editorBracketHighlight.foreground1#d8b4fe
editorBracketHighlight.foreground2#67e8f9
editorBracketHighlight.foreground3#fda4af
editorBracketHighlight.foreground4#86efac
editorBracketHighlight.foreground5#e9d5ff
editorBracketHighlight.foreground6#fef08a
editorBracketMatch.background#282a3d55
editorBracketMatch.border#67e8f9
editorCodeLens.foreground#6b6f8a
editorCursor.foreground#67e8f9
editorError.foreground#f87171
editorGroup.border#0f101a
editorGroup.dropBackground#d8b4fe22
editorGroupHeader.noTabsBackground#151622
editorGroupHeader.tabsBackground#0f101a
editorGutter.addedBackground#86efac
editorGutter.background#151622
editorGutter.deletedBackground#f87171
editorGutter.modifiedBackground#fda4af
editorHoverWidget.background#0f101a
editorHoverWidget.border#282a3d
editorIndentGuide.activeBackground1#6b6f8aaa
editorIndentGuide.background1#282a3d66
editorInfo.foreground#67e8f9
editorInlayHint.background#282a3d88
editorInlayHint.foreground#6b6f8acc
editorInlayHint.parameterBackground#282a3d88
editorInlayHint.parameterForeground#fda4afcc
editorInlayHint.typeBackground#282a3d88
editorInlayHint.typeForeground#86efaccc
editorLineNumber.activeForeground#67e8f9
editorLineNumber.foreground#6b6f8a88
editorLink.activeForeground#67e8f9
editorMarkerNavigation.background#0f101a
editorOverviewRuler.addedForeground#86efac
editorOverviewRuler.border#0f101a
editorOverviewRuler.bracketMatchForeground#67e8f9
editorOverviewRuler.errorForeground#f87171
editorOverviewRuler.findMatchForeground#fda4af
editorOverviewRuler.infoForeground#67e8f9
editorOverviewRuler.modifiedForeground#fda4af
editorOverviewRuler.rangeHighlightForeground#d8b4fe
editorOverviewRuler.selectionHighlightForeground#282a3d
editorOverviewRuler.warningForeground#fda4af
editorOverviewRuler.wordHighlightForeground#67e8f9
editorRuler.foreground#282a3d44
editorSuggestWidget.background#0f101a
editorSuggestWidget.border#282a3d
editorSuggestWidget.foreground#f8f7fc
editorSuggestWidget.highlightForeground#67e8f9
editorSuggestWidget.selectedBackground#282a3d
editorSuggestWidget.selectedForeground#67e8f9
editorWarning.foreground#fda4af
editorWhitespace.foreground#282a3d55
editorWidget.background#0f101a
editorWidget.border#67e8f955
errorForeground#f87171
focusBorder#67e8f9
foreground#f8f7fc
gitDecoration.addedResourceForeground#86efac
gitDecoration.conflictingResourceForeground#fda4af
gitDecoration.deletedResourceForeground#f87171
gitDecoration.ignoredResourceForeground#6b6f8a66
gitDecoration.modifiedResourceForeground#fda4af
gitDecoration.stageDeletedResourceForeground#f87171
gitDecoration.stageModifiedResourceForeground#67e8f9
gitDecoration.untrackedResourceForeground#67e8f9
icon.foreground#ffffff
input.background#282a3d
input.border#282a3d
input.foreground#ffffff
input.placeholderForeground#6b6f8a
inputOption.activeBackground#d8b4fe33
inputOption.activeBorder#67e8f9
inputOption.activeForeground#ffffff
inputValidation.errorBackground#f8717122
inputValidation.errorBorder#f87171
inputValidation.infoBackground#67e8f922
inputValidation.infoBorder#67e8f9
inputValidation.warningBackground#fda4af22
inputValidation.warningBorder#fda4af
list.activeSelectionBackground#282a3d
list.activeSelectionForeground#67e8f9
list.activeSelectionIconForeground#67e8f9
list.dropBackground#d8b4fe22
list.focusBackground#282a3d88
list.focusForeground#ffffff
list.focusHighlightForeground#67e8f9
list.highlightForeground#67e8f9
list.hoverBackground#282a3d55
list.hoverForeground#ffffff
list.inactiveSelectionBackground#282a3d55
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#0f101a
listFilterWidget.noMatchesOutline#f87171
listFilterWidget.outline#67e8f9
menu.background#0f101a
menu.border#282a3d
menu.foreground#ffffff
menu.selectionBackground#282a3d
menu.selectionForeground#67e8f9
menu.separatorBackground#282a3d
menubar.selectionBackground#282a3d
menubar.selectionForeground#67e8f9
minimap.errorHighlight#f87171
minimap.findMatchHighlight#fda4af
minimap.selectionHighlight#282a3d
minimap.warningHighlight#fda4af
minimapGutter.addedBackground#86efac
minimapGutter.deletedBackground#f87171
minimapGutter.modifiedBackground#fda4af
minimapSlider.activeBackground#67e8f944
minimapSlider.background#282a3d33
minimapSlider.hoverBackground#67e8f922
notificationCenterHeader.background#0f101a
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#67e8f9
notifications.background#0f101a
notifications.border#67e8f955
notifications.foreground#ffffff
notificationsErrorIcon.foreground#f87171
notificationsInfoIcon.foreground#67e8f9
notificationsWarningIcon.foreground#fda4af
panel.background#0f101a
panel.border#282a3d55
panelTitle.activeBorder#67e8f9
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#6b6f8a
peekView.border#67e8f9
peekViewEditor.background#151622
peekViewEditor.matchHighlightBackground#fda4af44
peekViewEditorGutter.background#151622
peekViewResult.background#0f101a
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#6b6f8a
peekViewResult.matchHighlightBackground#fda4af44
peekViewResult.selectionBackground#282a3d
peekViewResult.selectionForeground#67e8f9
peekViewTitle.background#0f101a
peekViewTitleDescription.foreground#6b6f8a
peekViewTitleInfo.foreground#d8b4fe
pickerGroup.border#67e8f955
pickerGroup.foreground#67e8f9
progressBar.background#d8b4fe
quickInput.background#0f101a
quickInput.foreground#ffffff
quickInputList.focusBackground#282a3d
quickInputTitle.background#0f101a
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#67e8f955
scrollbarSlider.background#282a3d44
scrollbarSlider.hoverBackground#67e8f933
selection.background#d8b4fe44
sideBar.background#0f101a
sideBar.border#00000000
sideBar.dropBackground#d8b4fe22
sideBar.foreground#ffffff
sideBarSectionHeader.background#0f101a
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#67e8f9
statusBar.background#0f101a
statusBar.border#00000000
statusBar.debuggingBackground#d8b4fe
statusBar.debuggingForeground#ffffff
statusBar.foreground#6b6f8a
statusBar.noFolderBackground#0f101a
statusBar.noFolderForeground#6b6f8a
statusBarItem.activeBackground#282a3d
statusBarItem.hoverBackground#282a3d88
statusBarItem.prominentBackground#282a3d
statusBarItem.prominentForeground#67e8f9
statusBarItem.prominentHoverBackground#282a3dcc
statusBarItem.remoteBackground#d8b4fe
statusBarItem.remoteForeground#ffffff
tab.activeBackground#151622
tab.activeBorder#d8b4fe
tab.activeBorderTop#67e8f9
tab.activeForeground#ffffff
tab.border#0f101a
tab.hoverBackground#282a3d88
tab.inactiveBackground#0f101a
tab.inactiveForeground#6b6f8a
tab.unfocusedActiveBackground#151622
tab.unfocusedActiveBorder#d8b4fe66
tab.unfocusedActiveBorderTop#67e8f966
tab.unfocusedActiveForeground#f8f7fc99
tab.unfocusedInactiveForeground#6b6f8a66
terminal.ansiBlack#151622
terminal.ansiBlue#d8b4fe
terminal.ansiBrightBlack#6b6f8a
terminal.ansiBrightBlue#d8b4fe
terminal.ansiBrightCyan#67e8f9
terminal.ansiBrightGreen#86efac
terminal.ansiBrightMagenta#e9d5ff
terminal.ansiBrightRed#f87171
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fef08a
terminal.ansiCyan#67e8f9
terminal.ansiGreen#86efac
terminal.ansiMagenta#d8b4fe
terminal.ansiRed#f87171
terminal.ansiWhite#ffffff
terminal.ansiYellow#fef08a
terminal.background#0f101a
terminal.foreground#ffffff
terminal.selectionBackground#282a3d99
terminalCursor.background#0f101a
terminalCursor.foreground#67e8f9
textBlockQuote.background#0f101a
textBlockQuote.border#d8b4fe
textCodeBlock.background#0f101a
textLink.activeForeground#67e8f9
textLink.foreground#67e8f9
textPreformat.foreground#fda4af
textSeparator.foreground#282a3d
titleBar.activeBackground#0f101a
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#0f101a
titleBar.inactiveForeground#6b6f8a
toolbar.activeBackground#282a3d
toolbar.hoverBackground#282a3d88
tree.indentGuidesStroke#282a3d55
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	#6b6f8a	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	#e9d5ff	—
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	#86efac	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	#86efac	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	#e9d5ff	—
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	#fbcfe8	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	#fbcfe8	—
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	#67e8f9	—
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	#67e8f9	—
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	#d8b4fe	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#fda4af	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#fef08a	—
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	#fef08a	bold
constant.other, variable.other.constant, variable.other.enummember	#fef08a	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#67e8f9	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#67e8f9	—
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	#d8b4fe	—
variable, variable.other, variable.other.readwrite	#f8f7fc	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#f8f7fc	—
invalid, invalid.illegal	#f87171	—

VS Code preview

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

Dracula's Vial — Dracula's Vial - Deep Abyss (Oceanic Bioluminescence)

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#0e1017
activityBar.activeBorder#00f0ff
activityBar.background#080a0f
activityBar.foreground#ffffff
activityBar.inactiveForeground#4d5b75
activityBarBadge.background#9b5de5
activityBarBadge.foreground#ffffff
badge.background#9b5de5
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#00f0ff
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#4d5b75
breadcrumbPicker.background#080a0f
button.background#9b5de5
button.foreground#ffffff
button.hoverBackground#9b5de5dd
button.secondaryBackground#1e2638
button.secondaryForeground#ffffff
button.secondaryHoverBackground#1e2638cc
charts.blue#00f0ff
charts.green#00f5d4
charts.orange#ff577f
charts.purple#9b5de5
charts.red#ff3366
charts.yellow#fee440
commandCenter.activeBackground#1e2638
commandCenter.activeBorder#00f0ff
commandCenter.background#080a0f
commandCenter.border#1e263888
commandCenter.foreground#ffffff
contrastBorder#00000000
debugToolBar.background#080a0f
diffEditor.diagonalFill#1e263840
diffEditor.insertedLineBackground#00f5d422
diffEditor.insertedTextBackground#00f5d433
diffEditor.removedLineBackground#ff336622
diffEditor.removedTextBackground#ff336633
dropdown.background#080a0f
dropdown.border#1e2638
dropdown.foreground#ffffff
editor.background#0e1017
editor.findMatchBackground#ff577f44
editor.findMatchBorder#ff577f
editor.findMatchHighlightBackground#00f0ff33
editor.findMatchHighlightBorder#00f0ff66
editor.foldingRangeBackground#1e263822
editor.foreground#f0f4f8
editor.hoverHighlightBackground#00f0ff22
editor.lineHighlightBackground#1e263866
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#9b5de515
editor.selectionBackground#1e2638cc
editor.selectionHighlightBackground#1e263866
editor.selectionHighlightBorder#00f0ff44
editor.wordHighlightBackground#00f0ff22
editor.wordHighlightBorder#00f0ff66
editor.wordHighlightStrongBackground#9b5de522
editor.wordHighlightStrongBorder#9b5de566
editorBracketHighlight.foreground1#9b5de5
editorBracketHighlight.foreground2#00f0ff
editorBracketHighlight.foreground3#ff577f
editorBracketHighlight.foreground4#00f5d4
editorBracketHighlight.foreground5#f15bb5
editorBracketHighlight.foreground6#fee440
editorBracketMatch.background#1e263855
editorBracketMatch.border#00f0ff
editorCodeLens.foreground#4d5b75
editorCursor.foreground#00f0ff
editorError.foreground#ff3366
editorGroup.border#080a0f
editorGroup.dropBackground#9b5de522
editorGroupHeader.noTabsBackground#0e1017
editorGroupHeader.tabsBackground#080a0f
editorGutter.addedBackground#00f5d4
editorGutter.background#0e1017
editorGutter.deletedBackground#ff3366
editorGutter.modifiedBackground#ff577f
editorHoverWidget.background#080a0f
editorHoverWidget.border#1e2638
editorIndentGuide.activeBackground1#4d5b75aa
editorIndentGuide.background1#1e263866
editorInfo.foreground#00f0ff
editorInlayHint.background#1e263888
editorInlayHint.foreground#4d5b75cc
editorInlayHint.parameterBackground#1e263888
editorInlayHint.parameterForeground#ff577fcc
editorInlayHint.typeBackground#1e263888
editorInlayHint.typeForeground#00f5d4cc
editorLineNumber.activeForeground#00f0ff
editorLineNumber.foreground#4d5b7588
editorLink.activeForeground#00f0ff
editorMarkerNavigation.background#080a0f
editorOverviewRuler.addedForeground#00f5d4
editorOverviewRuler.border#080a0f
editorOverviewRuler.bracketMatchForeground#00f0ff
editorOverviewRuler.errorForeground#ff3366
editorOverviewRuler.findMatchForeground#ff577f
editorOverviewRuler.infoForeground#00f0ff
editorOverviewRuler.modifiedForeground#ff577f
editorOverviewRuler.rangeHighlightForeground#9b5de5
editorOverviewRuler.selectionHighlightForeground#1e2638
editorOverviewRuler.warningForeground#ff577f
editorOverviewRuler.wordHighlightForeground#00f0ff
editorRuler.foreground#1e263844
editorSuggestWidget.background#080a0f
editorSuggestWidget.border#1e2638
editorSuggestWidget.foreground#f0f4f8
editorSuggestWidget.highlightForeground#00f0ff
editorSuggestWidget.selectedBackground#1e2638
editorSuggestWidget.selectedForeground#00f0ff
editorWarning.foreground#ff577f
editorWhitespace.foreground#1e263855
editorWidget.background#080a0f
editorWidget.border#00f0ff55
errorForeground#ff3366
focusBorder#00f0ff
foreground#f0f4f8
gitDecoration.addedResourceForeground#00f5d4
gitDecoration.conflictingResourceForeground#ff577f
gitDecoration.deletedResourceForeground#ff3366
gitDecoration.ignoredResourceForeground#4d5b7566
gitDecoration.modifiedResourceForeground#ff577f
gitDecoration.stageDeletedResourceForeground#ff3366
gitDecoration.stageModifiedResourceForeground#00f0ff
gitDecoration.untrackedResourceForeground#00f0ff
icon.foreground#ffffff
input.background#1e2638
input.border#1e2638
input.foreground#ffffff
input.placeholderForeground#4d5b75
inputOption.activeBackground#9b5de533
inputOption.activeBorder#00f0ff
inputOption.activeForeground#ffffff
inputValidation.errorBackground#ff336622
inputValidation.errorBorder#ff3366
inputValidation.infoBackground#00f0ff22
inputValidation.infoBorder#00f0ff
inputValidation.warningBackground#ff577f22
inputValidation.warningBorder#ff577f
list.activeSelectionBackground#1e2638
list.activeSelectionForeground#00f0ff
list.activeSelectionIconForeground#00f0ff
list.dropBackground#9b5de522
list.focusBackground#1e263888
list.focusForeground#ffffff
list.focusHighlightForeground#00f0ff
list.highlightForeground#00f0ff
list.hoverBackground#1e263855
list.hoverForeground#ffffff
list.inactiveSelectionBackground#1e263855
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#080a0f
listFilterWidget.noMatchesOutline#ff3366
listFilterWidget.outline#00f0ff
menu.background#080a0f
menu.border#1e2638
menu.foreground#ffffff
menu.selectionBackground#1e2638
menu.selectionForeground#00f0ff
menu.separatorBackground#1e2638
menubar.selectionBackground#1e2638
menubar.selectionForeground#00f0ff
minimap.errorHighlight#ff3366
minimap.findMatchHighlight#ff577f
minimap.selectionHighlight#1e2638
minimap.warningHighlight#ff577f
minimapGutter.addedBackground#00f5d4
minimapGutter.deletedBackground#ff3366
minimapGutter.modifiedBackground#ff577f
minimapSlider.activeBackground#00f0ff44
minimapSlider.background#1e263833
minimapSlider.hoverBackground#00f0ff22
notificationCenterHeader.background#080a0f
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#00f0ff
notifications.background#080a0f
notifications.border#00f0ff55
notifications.foreground#ffffff
notificationsErrorIcon.foreground#ff3366
notificationsInfoIcon.foreground#00f0ff
notificationsWarningIcon.foreground#ff577f
panel.background#080a0f
panel.border#1e263855
panelTitle.activeBorder#00f0ff
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#4d5b75
peekView.border#00f0ff
peekViewEditor.background#0e1017
peekViewEditor.matchHighlightBackground#ff577f44
peekViewEditorGutter.background#0e1017
peekViewResult.background#080a0f
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#4d5b75
peekViewResult.matchHighlightBackground#ff577f44
peekViewResult.selectionBackground#1e2638
peekViewResult.selectionForeground#00f0ff
peekViewTitle.background#080a0f
peekViewTitleDescription.foreground#4d5b75
peekViewTitleInfo.foreground#9b5de5
pickerGroup.border#00f0ff55
pickerGroup.foreground#00f0ff
progressBar.background#9b5de5
quickInput.background#080a0f
quickInput.foreground#ffffff
quickInputList.focusBackground#1e2638
quickInputTitle.background#080a0f
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#00f0ff55
scrollbarSlider.background#1e263844
scrollbarSlider.hoverBackground#00f0ff33
selection.background#9b5de544
sideBar.background#080a0f
sideBar.border#00000000
sideBar.dropBackground#9b5de522
sideBar.foreground#ffffff
sideBarSectionHeader.background#080a0f
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#00f0ff
statusBar.background#080a0f
statusBar.border#00000000
statusBar.debuggingBackground#9b5de5
statusBar.debuggingForeground#ffffff
statusBar.foreground#4d5b75
statusBar.noFolderBackground#080a0f
statusBar.noFolderForeground#4d5b75
statusBarItem.activeBackground#1e2638
statusBarItem.hoverBackground#1e263888
statusBarItem.prominentBackground#1e2638
statusBarItem.prominentForeground#00f0ff
statusBarItem.prominentHoverBackground#1e2638cc
statusBarItem.remoteBackground#9b5de5
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0e1017
tab.activeBorder#9b5de5
tab.activeBorderTop#00f0ff
tab.activeForeground#ffffff
tab.border#080a0f
tab.hoverBackground#1e263888
tab.inactiveBackground#080a0f
tab.inactiveForeground#4d5b75
tab.unfocusedActiveBackground#0e1017
tab.unfocusedActiveBorder#9b5de566
tab.unfocusedActiveBorderTop#00f0ff66
tab.unfocusedActiveForeground#f0f4f899
tab.unfocusedInactiveForeground#4d5b7566
terminal.ansiBlack#0e1017
terminal.ansiBlue#9b5de5
terminal.ansiBrightBlack#4d5b75
terminal.ansiBrightBlue#9b5de5
terminal.ansiBrightCyan#00f0ff
terminal.ansiBrightGreen#00f5d4
terminal.ansiBrightMagenta#f15bb5
terminal.ansiBrightRed#ff3366
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fee440
terminal.ansiCyan#00f0ff
terminal.ansiGreen#00f5d4
terminal.ansiMagenta#9b5de5
terminal.ansiRed#ff3366
terminal.ansiWhite#ffffff
terminal.ansiYellow#fee440
terminal.background#080a0f
terminal.foreground#ffffff
terminal.selectionBackground#1e263899
terminalCursor.background#080a0f
terminalCursor.foreground#00f0ff
textBlockQuote.background#080a0f
textBlockQuote.border#9b5de5
textCodeBlock.background#080a0f
textLink.activeForeground#00f0ff
textLink.foreground#00f0ff
textPreformat.foreground#ff577f
textSeparator.foreground#1e2638
titleBar.activeBackground#080a0f
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#080a0f
titleBar.inactiveForeground#4d5b75
toolbar.activeBackground#1e2638
toolbar.hoverBackground#1e263888
tree.indentGuidesStroke#1e263855
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	#4d5b75	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	#f15bb5	—
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	#00f5d4	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	#00f5d4	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	#f15bb5	—
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	#ff758f	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	#ff758f	—
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	#00f0ff	—
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	#00f0ff	—
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	#9b5de5	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#ff577f	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#fee440	—
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	#fee440	bold
constant.other, variable.other.constant, variable.other.enummember	#fee440	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#00f0ff	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#00f0ff	—
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	#9b5de5	—
variable, variable.other, variable.other.readwrite	#f0f4f8	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#f0f4f8	—
invalid, invalid.illegal	#ff3366	—

VS Code preview

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

Dracula's Vial — Dracula's Vial - Galactic Plasma (Plasma Violet & Solar)

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#111222
activityBar.activeBorder#22d3ee
activityBar.background#0a0b16
activityBar.foreground#ffffff
activityBar.inactiveForeground#5e638c
activityBarBadge.background#c084fc
activityBarBadge.foreground#ffffff
badge.background#c084fc
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#22d3ee
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#5e638c
breadcrumbPicker.background#0a0b16
button.background#c084fc
button.foreground#ffffff
button.hoverBackground#c084fcdd
button.secondaryBackground#232647
button.secondaryForeground#ffffff
button.secondaryHoverBackground#232647cc
charts.blue#22d3ee
charts.green#34d399
charts.orange#f472b6
charts.purple#c084fc
charts.red#f87171
charts.yellow#fbbf24
commandCenter.activeBackground#232647
commandCenter.activeBorder#22d3ee
commandCenter.background#0a0b16
commandCenter.border#23264788
commandCenter.foreground#ffffff
contrastBorder#00000000
debugToolBar.background#0a0b16
diffEditor.diagonalFill#23264740
diffEditor.insertedLineBackground#34d39922
diffEditor.insertedTextBackground#34d39933
diffEditor.removedLineBackground#f8717122
diffEditor.removedTextBackground#f8717133
dropdown.background#0a0b16
dropdown.border#232647
dropdown.foreground#ffffff
editor.background#111222
editor.findMatchBackground#f472b644
editor.findMatchBorder#f472b6
editor.findMatchHighlightBackground#22d3ee33
editor.findMatchHighlightBorder#22d3ee66
editor.foldingRangeBackground#23264722
editor.foreground#f5f3ff
editor.hoverHighlightBackground#22d3ee22
editor.lineHighlightBackground#23264766
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#c084fc15
editor.selectionBackground#232647cc
editor.selectionHighlightBackground#23264766
editor.selectionHighlightBorder#22d3ee44
editor.wordHighlightBackground#22d3ee22
editor.wordHighlightBorder#22d3ee66
editor.wordHighlightStrongBackground#c084fc22
editor.wordHighlightStrongBorder#c084fc66
editorBracketHighlight.foreground1#c084fc
editorBracketHighlight.foreground2#22d3ee
editorBracketHighlight.foreground3#f472b6
editorBracketHighlight.foreground4#34d399
editorBracketHighlight.foreground5#e879f9
editorBracketHighlight.foreground6#fbbf24
editorBracketMatch.background#23264755
editorBracketMatch.border#22d3ee
editorCodeLens.foreground#5e638c
editorCursor.foreground#22d3ee
editorError.foreground#f87171
editorGroup.border#0a0b16
editorGroup.dropBackground#c084fc22
editorGroupHeader.noTabsBackground#111222
editorGroupHeader.tabsBackground#0a0b16
editorGutter.addedBackground#34d399
editorGutter.background#111222
editorGutter.deletedBackground#f87171
editorGutter.modifiedBackground#f472b6
editorHoverWidget.background#0a0b16
editorHoverWidget.border#232647
editorIndentGuide.activeBackground1#5e638caa
editorIndentGuide.background1#23264766
editorInfo.foreground#22d3ee
editorInlayHint.background#23264788
editorInlayHint.foreground#5e638ccc
editorInlayHint.parameterBackground#23264788
editorInlayHint.parameterForeground#f472b6cc
editorInlayHint.typeBackground#23264788
editorInlayHint.typeForeground#34d399cc
editorLineNumber.activeForeground#22d3ee
editorLineNumber.foreground#5e638c88
editorLink.activeForeground#22d3ee
editorMarkerNavigation.background#0a0b16
editorOverviewRuler.addedForeground#34d399
editorOverviewRuler.border#0a0b16
editorOverviewRuler.bracketMatchForeground#22d3ee
editorOverviewRuler.errorForeground#f87171
editorOverviewRuler.findMatchForeground#f472b6
editorOverviewRuler.infoForeground#22d3ee
editorOverviewRuler.modifiedForeground#f472b6
editorOverviewRuler.rangeHighlightForeground#c084fc
editorOverviewRuler.selectionHighlightForeground#232647
editorOverviewRuler.warningForeground#f472b6
editorOverviewRuler.wordHighlightForeground#22d3ee
editorRuler.foreground#23264744
editorSuggestWidget.background#0a0b16
editorSuggestWidget.border#232647
editorSuggestWidget.foreground#f5f3ff
editorSuggestWidget.highlightForeground#22d3ee
editorSuggestWidget.selectedBackground#232647
editorSuggestWidget.selectedForeground#22d3ee
editorWarning.foreground#f472b6
editorWhitespace.foreground#23264755
editorWidget.background#0a0b16
editorWidget.border#22d3ee55
errorForeground#f87171
focusBorder#22d3ee
foreground#f5f3ff
gitDecoration.addedResourceForeground#34d399
gitDecoration.conflictingResourceForeground#f472b6
gitDecoration.deletedResourceForeground#f87171
gitDecoration.ignoredResourceForeground#5e638c66
gitDecoration.modifiedResourceForeground#f472b6
gitDecoration.stageDeletedResourceForeground#f87171
gitDecoration.stageModifiedResourceForeground#22d3ee
gitDecoration.untrackedResourceForeground#22d3ee
icon.foreground#ffffff
input.background#232647
input.border#232647
input.foreground#ffffff
input.placeholderForeground#5e638c
inputOption.activeBackground#c084fc33
inputOption.activeBorder#22d3ee
inputOption.activeForeground#ffffff
inputValidation.errorBackground#f8717122
inputValidation.errorBorder#f87171
inputValidation.infoBackground#22d3ee22
inputValidation.infoBorder#22d3ee
inputValidation.warningBackground#f472b622
inputValidation.warningBorder#f472b6
list.activeSelectionBackground#232647
list.activeSelectionForeground#22d3ee
list.activeSelectionIconForeground#22d3ee
list.dropBackground#c084fc22
list.focusBackground#23264788
list.focusForeground#ffffff
list.focusHighlightForeground#22d3ee
list.highlightForeground#22d3ee
list.hoverBackground#23264755
list.hoverForeground#ffffff
list.inactiveSelectionBackground#23264755
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#0a0b16
listFilterWidget.noMatchesOutline#f87171
listFilterWidget.outline#22d3ee
menu.background#0a0b16
menu.border#232647
menu.foreground#ffffff
menu.selectionBackground#232647
menu.selectionForeground#22d3ee
menu.separatorBackground#232647
menubar.selectionBackground#232647
menubar.selectionForeground#22d3ee
minimap.errorHighlight#f87171
minimap.findMatchHighlight#f472b6
minimap.selectionHighlight#232647
minimap.warningHighlight#f472b6
minimapGutter.addedBackground#34d399
minimapGutter.deletedBackground#f87171
minimapGutter.modifiedBackground#f472b6
minimapSlider.activeBackground#22d3ee44
minimapSlider.background#23264733
minimapSlider.hoverBackground#22d3ee22
notificationCenterHeader.background#0a0b16
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#22d3ee
notifications.background#0a0b16
notifications.border#22d3ee55
notifications.foreground#ffffff
notificationsErrorIcon.foreground#f87171
notificationsInfoIcon.foreground#22d3ee
notificationsWarningIcon.foreground#f472b6
panel.background#0a0b16
panel.border#23264755
panelTitle.activeBorder#22d3ee
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#5e638c
peekView.border#22d3ee
peekViewEditor.background#111222
peekViewEditor.matchHighlightBackground#f472b644
peekViewEditorGutter.background#111222
peekViewResult.background#0a0b16
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#5e638c
peekViewResult.matchHighlightBackground#f472b644
peekViewResult.selectionBackground#232647
peekViewResult.selectionForeground#22d3ee
peekViewTitle.background#0a0b16
peekViewTitleDescription.foreground#5e638c
peekViewTitleInfo.foreground#c084fc
pickerGroup.border#22d3ee55
pickerGroup.foreground#22d3ee
progressBar.background#c084fc
quickInput.background#0a0b16
quickInput.foreground#ffffff
quickInputList.focusBackground#232647
quickInputTitle.background#0a0b16
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#22d3ee55
scrollbarSlider.background#23264744
scrollbarSlider.hoverBackground#22d3ee33
selection.background#c084fc44
sideBar.background#0a0b16
sideBar.border#00000000
sideBar.dropBackground#c084fc22
sideBar.foreground#ffffff
sideBarSectionHeader.background#0a0b16
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#22d3ee
statusBar.background#0a0b16
statusBar.border#00000000
statusBar.debuggingBackground#c084fc
statusBar.debuggingForeground#ffffff
statusBar.foreground#5e638c
statusBar.noFolderBackground#0a0b16
statusBar.noFolderForeground#5e638c
statusBarItem.activeBackground#232647
statusBarItem.hoverBackground#23264788
statusBarItem.prominentBackground#232647
statusBarItem.prominentForeground#22d3ee
statusBarItem.prominentHoverBackground#232647cc
statusBarItem.remoteBackground#c084fc
statusBarItem.remoteForeground#ffffff
tab.activeBackground#111222
tab.activeBorder#c084fc
tab.activeBorderTop#22d3ee
tab.activeForeground#ffffff
tab.border#0a0b16
tab.hoverBackground#23264788
tab.inactiveBackground#0a0b16
tab.inactiveForeground#5e638c
tab.unfocusedActiveBackground#111222
tab.unfocusedActiveBorder#c084fc66
tab.unfocusedActiveBorderTop#22d3ee66
tab.unfocusedActiveForeground#f5f3ff99
tab.unfocusedInactiveForeground#5e638c66
terminal.ansiBlack#111222
terminal.ansiBlue#c084fc
terminal.ansiBrightBlack#5e638c
terminal.ansiBrightBlue#c084fc
terminal.ansiBrightCyan#22d3ee
terminal.ansiBrightGreen#34d399
terminal.ansiBrightMagenta#e879f9
terminal.ansiBrightRed#f87171
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fbbf24
terminal.ansiCyan#22d3ee
terminal.ansiGreen#34d399
terminal.ansiMagenta#c084fc
terminal.ansiRed#f87171
terminal.ansiWhite#ffffff
terminal.ansiYellow#fbbf24
terminal.background#0a0b16
terminal.foreground#ffffff
terminal.selectionBackground#23264799
terminalCursor.background#0a0b16
terminalCursor.foreground#22d3ee
textBlockQuote.background#0a0b16
textBlockQuote.border#c084fc
textCodeBlock.background#0a0b16
textLink.activeForeground#22d3ee
textLink.foreground#22d3ee
textPreformat.foreground#f472b6
textSeparator.foreground#232647
titleBar.activeBackground#0a0b16
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#0a0b16
titleBar.inactiveForeground#5e638c
toolbar.activeBackground#232647
toolbar.hoverBackground#23264788
tree.indentGuidesStroke#23264755
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	#5e638c	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	#e879f9	—
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	#34d399	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	#34d399	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	#e879f9	—
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	#fb923c	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	#fb923c	—
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	#22d3ee	—
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	#22d3ee	—
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	#c084fc	bold
string, string.quoted, string.quoted.single, string.quoted.double, string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#f472b6	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal	#fbbf24	—
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	#fbbf24	bold
constant.other, variable.other.constant, variable.other.enummember	#fbbf24	—
entity.name.tag, entity.name.tag.custom, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.html, support.class.component	#22d3ee	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#22d3ee	—
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	#c084fc	—
variable, variable.other, variable.other.readwrite	#f5f3ff	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.block	#f5f3ff	—
invalid, invalid.illegal	#f87171	—