Cyber Dark & Qoder Themes

Name: Cyber Dark & Qoder Themes
Author: tryToDEv

Publisher: tryToDEvThemes in package: 8

A modern VSCode theme collection featuring Cyber Dark variants and modern purple/blue accent themes with clean, minimalistic design

Open in VS Code GitHub

Color themes

VS Code preview

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

Cyber Dark & Qoder Themes — JavaScript Modern Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0B0D12
activityBar.border#374151
activityBar.foreground#E5E7EB
activityBar.inactiveForeground#64748B
activityBarBadge.background#60A5FA
activityBarBadge.foreground#0F1117
breadcrumb.activeSelectionForeground#60A5FA
breadcrumb.background#0F1117
breadcrumb.focusForeground#E5E7EB
breadcrumb.foreground#64748B
button.background#1F2937
button.foreground#E5E7EB
button.hoverBackground#374151
button.secondaryBackground#1F2937
button.secondaryForeground#E5E7EB
button.secondaryHoverBackground#374151
checkbox.background#1F2937
checkbox.border#374151
checkbox.foreground#E5E7EB
contrastActiveBorder#60A5FA
contrastBorder#60A5FA
debugExceptionWidget.background#161922
debugExceptionWidget.border#374151
debugToolBar.background#161922
debugToolBar.border#374151
descriptionForeground#64748B
diffEditor.insertedTextBackground#1A3D2A
diffEditor.insertedTextBorder#34D399
diffEditor.removedTextBackground#3D1A1A
diffEditor.removedTextBorder#FB923C
dropdown.background#161922
dropdown.border#374151
dropdown.foreground#E5E7EB
editor.background#0F1117
editor.findMatchBackground#2D3748
editor.findMatchHighlightBackground#1F2937
editor.foreground#E5E7EB
editor.inactiveSelectionBackground#161922
editor.lineHighlightBackground#161922
editor.selectionBackground#2D3748
editor.selectionHighlightBackground#2D3748
editorBracketMatch.background#2D3748
editorBracketMatch.border#60A5FA
editorCursor.foreground#60A5FA
editorGhostText.foreground#64748B
editorGroup.background#0F1117
editorGroup.border#374151
editorGroupHeader.tabsBackground#0F1117
editorGroupHeader.tabsBorder#374151
editorHoverWidget.background#161922
editorHoverWidget.border#374151
editorIndentGuide.activeBackground#374151
editorIndentGuide.background#1F2937
editorLineNumber.activeForeground#E5E7EB
editorLineNumber.foreground#64748B
editorOverviewRuler.border#374151
editorOverviewRuler.bracketMatchForeground#60A5FA
editorOverviewRuler.errorForeground#FB923C
editorOverviewRuler.findMatchForeground#FB923C
editorOverviewRuler.infoForeground#38BDF8
editorOverviewRuler.rangeHighlightForeground#2D3748
editorOverviewRuler.selectionHighlightForeground#2D3748
editorOverviewRuler.warningForeground#FBBF24
editorSuggestWidget.background#161922
editorSuggestWidget.border#374151
editorSuggestWidget.highlightForeground#60A5FA
editorSuggestWidget.selectedBackground#2D3748
editorUnicodeHighlight.background#2D3748
editorUnicodeHighlight.border#374151
editorWhitespace.foreground#374151
errorBackground#3D1A1A
errorForeground#FB923C
explorerFolderIcon.color#60A5FA
extensionButton.prominentBackground#60A5FA
extensionButton.prominentForeground#0F1117
extensionButton.prominentHoverBackground#93C5FD
focusBorder#60A5FA
gitDecoration.addedResourceForeground#34D399
gitDecoration.conflictedResourceForeground#FB923C
gitDecoration.deletedResourceForeground#FB923C
gitDecoration.ignoredResourceForeground#64748B
gitDecoration.modifiedResourceForeground#38BDF8
gitDecoration.untrackedResourceForeground#FBBF24
infoBackground#1A2A3D
infoForeground#38BDF8
input.background#0F1117
input.border#374151
input.foreground#E5E7EB
input.placeholderForeground#64748B
inputValidation.errorBackground#3D1A1A
inputValidation.errorBorder#FB923C
inputValidation.errorForeground#FB923C
inputValidation.infoBackground#1A2A3D
inputValidation.infoBorder#38BDF8
inputValidation.infoForeground#38BDF8
inputValidation.warningBackground#3D2A1A
inputValidation.warningBorder#FBBF24
inputValidation.warningForeground#FBBF24
list.activeSelectionBackground#2D3748
list.activeSelectionForeground#E5E7EB
list.deemphasizedForeground#64748B
list.errorForeground#FB923C
list.focusBackground#2D3748
list.focusForeground#E5E7EB
list.highlightForeground#60A5FA
list.hoverBackground#161922
list.inactiveFocusBackground#161922
list.inactiveFocusForeground#E5E7EB
list.inactiveSelectionBackground#161922
list.inactiveSelectionForeground#E5E7EB
list.warningForeground#FBBF24
menu.background#161922
menu.border#374151
menu.foreground#E5E7EB
menu.selectionBackground#2D3748
menu.selectionForeground#E5E7EB
menu.separatorBackground#374151
notificationCenter.background#161922
notificationCenter.border#374151
notifications.background#161922
notifications.border#374151
notifications.foreground#E5E7EB
notificationsErrorIcon.foreground#FB923C
notificationsInfoIcon.foreground#38BDF8
notificationsWarningIcon.foreground#FBBF24
notificationToast.border#374151
panel.background#0B0D12
panel.border#374151
panel.dropBackground#2D374840
panelSection.border#374151
panelSection.dropBackground#2D374840
panelSectionHeader.background#0F1117
panelSectionHeader.border#374151
panelSectionHeader.foreground#E5E7EB
panelTitle.activeBorder#60A5FA
panelTitle.activeForeground#E5E7EB
panelTitle.inactiveForeground#64748B
pickerGroup.border#374151
pickerGroup.foreground#64748B
progressBar.background#60A5FA
scrollbarSlider.activeBackground#60A5FA
scrollbarSlider.background#374151
scrollbarSlider.hoverBackground#4B5563
sideBar.background#0F1117
sideBar.border#374151
sideBar.foreground#E5E7EB
sideBarSectionHeader.background#0F1117
sideBarSectionHeader.foreground#64748B
sideBarTitle.foreground#E5E7EB
statusBar.background#0F1117
statusBar.border#374151
statusBar.debuggingBackground#0F1117
statusBar.debuggingForeground#FB923C
statusBar.foreground#E5E7EB
statusBar.noFolderBackground#0F1117
symbolIcon.arrayForeground#38BDF8
symbolIcon.booleanForeground#FB923C
symbolIcon.classForeground#FBBF24
symbolIcon.colorForeground#A78BFA
symbolIcon.constantForeground#FBBF24
symbolIcon.constructorForeground#A78BFA
symbolIcon.enumeratorForeground#FBBF24
symbolIcon.enumeratorMemberForeground#38BDF8
symbolIcon.eventForeground#FBBF24
symbolIcon.fieldForeground#38BDF8
symbolIcon.fileForeground#E5E7EB
symbolIcon.folderForeground#60A5FA
symbolIcon.functionForeground#A78BFA
symbolIcon.interfaceForeground#FBBF24
symbolIcon.keyForeground#38BDF8
symbolIcon.keywordForeground#60A5FA
symbolIcon.methodForeground#A78BFA
symbolIcon.moduleForeground#60A5FA
symbolIcon.namespaceForeground#FBBF24
symbolIcon.nullForeground#64748B
symbolIcon.numberForeground#FB923C
symbolIcon.objectForeground#38BDF8
symbolIcon.operatorForeground#60A5FA
symbolIcon.packageForeground#60A5FA
symbolIcon.propertyForeground#38BDF8
symbolIcon.referenceForeground#38BDF8
symbolIcon.snippetForeground#A78BFA
symbolIcon.stringForeground#34D399
symbolIcon.structForeground#FBBF24
symbolIcon.textForeground#E5E7EB
symbolIcon.typeParameterForeground#38BDF8
symbolIcon.unitForeground#FBBF24
symbolIcon.variableForeground#38BDF8
tab.activeBackground#0F1117
tab.activeBorder#60A5FA
tab.activeForeground#E5E7EB
tab.inactiveBackground#0F1117
tab.inactiveBorder#374151
tab.inactiveForeground#64748B
terminal.ansiBlack#0F1117
terminal.ansiBlue#60A5FA
terminal.ansiBrightBlack#64748B
terminal.ansiBrightBlue#93C5FD
terminal.ansiBrightCyan#7DD3FC
terminal.ansiBrightGreen#6EE7B7
terminal.ansiBrightMagenta#C4B5FD
terminal.ansiBrightRed#FCA5A5
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FDE68A
terminal.ansiCyan#38BDF8
terminal.ansiGreen#34D399
terminal.ansiMagenta#A78BFA
terminal.ansiRed#FB923C
terminal.ansiWhite#E5E7EB
terminal.ansiYellow#FBBF24
terminal.background#0B0D12
terminal.border#374151
terminal.foreground#E5E7EB
terminal.selectionBackground#2D374880
terminalCursor.background#60A5FA
terminalCursor.foreground#0B0D12
textBlockQuote.background#161922
textBlockQuote.border#374151
textCodeBlock.background#161922
textLink.activeForeground#93C5FD
textLink.foreground#60A5FA
textPreformat.foreground#A78BFA
titleBar.activeBackground#0F1117
titleBar.activeForeground#E5E7EB
titleBar.border#374151
titleBar.inactiveBackground#0F1117
titleBar.inactiveForeground#64748B
walkthrough.stepActive.foreground#60A5FA
walkthrough.stepDescription.foreground#64748B
walkthrough.stepTitle.foreground#E5E7EB
warningBackground#3D2A1A
warningForeground#FBBF24
welcomePage.background#0F1117
welcomePage.buttonBackground#1F2937
welcomePage.buttonHoverBackground#374151
widget.shadow#0B0D12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748B	italic
keyword, storage.type, storage.modifier	#60A5FA	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow	#60A5FA	bold
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.loop.js, keyword.control.loop.ts	#60A5FA	bold
keyword.control.async.js, keyword.control.async.ts, storage.modifier.async.js, storage.modifier.async.ts	#60A5FA	bold
entity.name.function, support.function, meta.function-call	#A78BFA	—
meta.method, meta.method-call, entity.name.method	#A78BFA	—
storage.type.function.arrow.js, storage.type.function.arrow.ts, keyword.operator.arrow.js, keyword.operator.arrow.ts	#A78BFA	—
entity.name.class, entity.name.type.class, support.class, storage.type.class.js, storage.type.class.ts	#F87171	—
entity.name.type, support.type, storage.type	#F87171	—
entity.name.interface, entity.name.type.interface	#F87171	—
variable, variable.other, variable.other.readwrite	#38BDF8	—
variable.language.this.js, variable.language.this.ts, variable.language.super.js, variable.language.super.ts	#FBBF24	bold
variable.other.constant, constant, constant.language, constant.numeric	#FBBF24	—
string, string.quoted, string.template	#34D399	—
string.template.js, string.template.ts	#34D399	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#FB923C	—
constant.language.boolean, constant.language.true, constant.language.false	#FB923C	bold
constant.language.null, constant.language.undefined, constant.language.nan	#FB923C	italic
variable.other.property, meta.property-name, support.variable.property	#38BDF8	—
keyword.operator, punctuation.separator.key-value, punctuation.accessor	#60A5FA	—
keyword.operator.spread.js, keyword.operator.spread.ts, keyword.operator.rest.js, keyword.operator.rest.ts	#A78BFA	bold
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator	#D1D5DB	—
entity.name.tag, meta.tag, punctuation.definition.tag	#60A5FA	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx, meta.tag.js, meta.tag.tsx	#60A5FA	—
entity.other.attribute-name, meta.attribute-name	#38BDF8	—
entity.other.attribute-name.js, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx	#38BDF8	—
string.quoted.double, string.quoted.single	#34D399	—
meta.decorator, entity.name.decorator	#A78BFA	—
variable.parameter, variable.parameter.function	#38BDF8	—
entity.name.label	#FBBF24	—
entity.name.namespace, support.namespace	#FBBF24	—
entity.name.enum, entity.name.type.enum	#FBBF24	—
variable.other.enummember, constant.other.enum	#38BDF8	—
entity.name.function.constructor, support.function.constructor	#A78BFA	—
entity.name.module, support.module	#60A5FA	—
keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts, keyword.control.from.js, keyword.control.from.ts	#60A5FA	bold
string.regexp	#A78BFA	—
constant.character.escape	#FBBF24	—
invalid, invalid.illegal	#FB923C	underline
invalid.deprecated	#64748B	strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown	#60A5FA	bold
markup.bold, punctuation.definition.bold	#E5E7EB	bold
markup.italic, punctuation.definition.italic	#E5E7EB	italic
markup.underline.link, string.other.link	#60A5FA	underline
markup.raw, markup.raw.block	#34D399	—
markup.list, punctuation.definition.list	#FBBF24	—
markup.quote	#64748B	italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag	#60A5FA	—
support.type.property-name, support.property-name	#38BDF8	—
support.constant.property-value, constant.other.color	#34D399	—
support.type.property-name.json, meta.key.json	#38BDF8	—
meta.value.json string.quoted.double.json	#34D399	—
entity.name.tag.yaml	#38BDF8	—
string.unquoted.yaml	#34D399	—
support.function.python, entity.name.function.python	#A78BFA	—
meta.decorator.python, entity.name.decorator.python	#A78BFA	—
variable.language.self.python, variable.language.cls.python	#FBBF24	—
storage.type.annotation.java, meta.annotation.java	#A78BFA	—
entity.name.function.go, support.function.go	#A78BFA	—
entity.name.function.macro.rust, meta.macro.rust	#A78BFA	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust	#FBBF24	—
entity.name.function.shell, support.function.builtin.shell	#A78BFA	bold
variable.other.shell, variable.other.readwrite.shell	#38BDF8	—
string.quoted.shell, string.unquoted.shell	#34D399	—
variable.parameter.shell	#FBBF24	—
markup.inserted.shell, string.success.shell	#34D399	bold
markup.changed.shell, string.warning.shell	#FBBF24	bold
markup.deleted.shell, string.error.shell	#FB923C	bold

VS Code preview

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

Cyber Dark & Qoder Themes — JavaScript Neon Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#05080C
activityBar.border#1F2937
activityBar.foreground#E5E7EB
activityBar.inactiveForeground#6B7280
activityBarBadge.background#00F0FF
activityBarBadge.foreground#0A0E14
breadcrumb.activeSelectionForeground#00F0FF
breadcrumb.background#0A0E14
breadcrumb.focusForeground#E5E7EB
breadcrumb.foreground#6B7280
button.background#1F2937
button.foreground#E5E7EB
button.hoverBackground#374151
button.secondaryBackground#1F2937
button.secondaryForeground#E5E7EB
button.secondaryHoverBackground#374151
checkbox.background#1F2937
checkbox.border#1F2937
checkbox.foreground#E5E7EB
contrastActiveBorder#00F0FF
contrastBorder#00F0FF
debugExceptionWidget.background#121820
debugExceptionWidget.border#1F2937
debugToolBar.background#121820
debugToolBar.border#1F2937
descriptionForeground#6B7280
diffEditor.insertedTextBackground#0A3D2A
diffEditor.insertedTextBorder#00FF9D
diffEditor.removedTextBackground#3D0A0A
diffEditor.removedTextBorder#FF6B00
dropdown.background#121820
dropdown.border#1F2937
dropdown.foreground#E5E7EB
editor.background#0A0E14
editor.findMatchBackground#1E3A5F
editor.findMatchHighlightBackground#1F2937
editor.foreground#E5E7EB
editor.inactiveSelectionBackground#121820
editor.lineHighlightBackground#121820
editor.selectionBackground#1E3A5F
editor.selectionHighlightBackground#1E3A5F
editorBracketMatch.background#1E3A5F
editorBracketMatch.border#00F0FF
editorCursor.foreground#00F0FF
editorGhostText.foreground#6B7280
editorGroup.background#0A0E14
editorGroup.border#1F2937
editorGroupHeader.tabsBackground#0A0E14
editorGroupHeader.tabsBorder#1F2937
editorHoverWidget.background#121820
editorHoverWidget.border#1F2937
editorIndentGuide.activeBackground#374151
editorIndentGuide.background#1F2937
editorLineNumber.activeForeground#E5E7EB
editorLineNumber.foreground#6B7280
editorOverviewRuler.border#1F2937
editorOverviewRuler.bracketMatchForeground#00F0FF
editorOverviewRuler.errorForeground#FF6B00
editorOverviewRuler.findMatchForeground#FF6B00
editorOverviewRuler.infoForeground#3B82F6
editorOverviewRuler.rangeHighlightForeground#1E3A5F
editorOverviewRuler.selectionHighlightForeground#1E3A5F
editorOverviewRuler.warningForeground#FFFF00
editorSuggestWidget.background#121820
editorSuggestWidget.border#1F2937
editorSuggestWidget.highlightForeground#00F0FF
editorSuggestWidget.selectedBackground#1E3A5F
editorUnicodeHighlight.background#1E3A5F
editorUnicodeHighlight.border#1F2937
editorWhitespace.foreground#374151
errorBackground#3D0A0A
errorForeground#FF6B00
explorerFolderIcon.color#00F0FF
extensionButton.prominentBackground#00F0FF
extensionButton.prominentForeground#0A0E14
extensionButton.prominentHoverBackground#33F0FF
focusBorder#00F0FF
gitDecoration.addedResourceForeground#00FF9D
gitDecoration.conflictedResourceForeground#FF6B00
gitDecoration.deletedResourceForeground#FF6B00
gitDecoration.ignoredResourceForeground#6B7280
gitDecoration.modifiedResourceForeground#3B82F6
gitDecoration.untrackedResourceForeground#FFFF00
infoBackground#0A2A3D
infoForeground#3B82F6
input.background#0A0E14
input.border#1F2937
input.foreground#E5E7EB
input.placeholderForeground#6B7280
inputValidation.errorBackground#3D0A0A
inputValidation.errorBorder#FF6B00
inputValidation.errorForeground#FF6B00
inputValidation.infoBackground#0A2A3D
inputValidation.infoBorder#3B82F6
inputValidation.infoForeground#3B82F6
inputValidation.warningBackground#3D2A0A
inputValidation.warningBorder#FFFF00
inputValidation.warningForeground#FFFF00
list.activeSelectionBackground#1E3A5F
list.activeSelectionForeground#E5E7EB
list.deemphasizedForeground#6B7280
list.errorForeground#FF6B00
list.focusBackground#1E3A5F
list.focusForeground#E5E7EB
list.highlightForeground#00F0FF
list.hoverBackground#121820
list.inactiveFocusBackground#121820
list.inactiveFocusForeground#E5E7EB
list.inactiveSelectionBackground#121820
list.inactiveSelectionForeground#E5E7EB
list.warningForeground#FFFF00
menu.background#121820
menu.border#1F2937
menu.foreground#E5E7EB
menu.selectionBackground#1E3A5F
menu.selectionForeground#E5E7EB
menu.separatorBackground#1F2937
notificationCenter.background#121820
notificationCenter.border#1F2937
notifications.background#121820
notifications.border#1F2937
notifications.foreground#E5E7EB
notificationsErrorIcon.foreground#FF6B00
notificationsInfoIcon.foreground#3B82F6
notificationsWarningIcon.foreground#FFFF00
notificationToast.border#1F2937
panel.background#05080C
panel.border#1F2937
panel.dropBackground#1E3A5F40
panelSection.border#1F2937
panelSection.dropBackground#1E3A5F40
panelSectionHeader.background#0A0E14
panelSectionHeader.border#1F2937
panelSectionHeader.foreground#E5E7EB
panelTitle.activeBorder#00F0FF
panelTitle.activeForeground#E5E7EB
panelTitle.inactiveForeground#6B7280
pickerGroup.border#1F2937
pickerGroup.foreground#6B7280
progressBar.background#00F0FF
scrollbarSlider.activeBackground#00F0FF
scrollbarSlider.background#1F2937
scrollbarSlider.hoverBackground#374151
sideBar.background#0A0E14
sideBar.border#1F2937
sideBar.foreground#E5E7EB
sideBarSectionHeader.background#0A0E14
sideBarSectionHeader.foreground#6B7280
sideBarTitle.foreground#E5E7EB
statusBar.background#0A0E14
statusBar.border#1F2937
statusBar.debuggingBackground#0A0E14
statusBar.debuggingForeground#FF6B00
statusBar.foreground#E5E7EB
statusBar.noFolderBackground#0A0E14
symbolIcon.arrayForeground#3B82F6
symbolIcon.booleanForeground#FF6B00
symbolIcon.classForeground#FFFF00
symbolIcon.colorForeground#FF00FF
symbolIcon.constantForeground#FFFF00
symbolIcon.constructorForeground#FF00FF
symbolIcon.enumeratorForeground#FFFF00
symbolIcon.enumeratorMemberForeground#3B82F6
symbolIcon.eventForeground#FFFF00
symbolIcon.fieldForeground#3B82F6
symbolIcon.fileForeground#E5E7EB
symbolIcon.folderForeground#00F0FF
symbolIcon.functionForeground#FF00FF
symbolIcon.interfaceForeground#FFFF00
symbolIcon.keyForeground#3B82F6
symbolIcon.keywordForeground#00F0FF
symbolIcon.methodForeground#FF00FF
symbolIcon.moduleForeground#00F0FF
symbolIcon.namespaceForeground#FFFF00
symbolIcon.nullForeground#6B7280
symbolIcon.numberForeground#FF6B00
symbolIcon.objectForeground#3B82F6
symbolIcon.operatorForeground#00F0FF
symbolIcon.packageForeground#00F0FF
symbolIcon.propertyForeground#3B82F6
symbolIcon.referenceForeground#3B82F6
symbolIcon.snippetForeground#FF00FF
symbolIcon.stringForeground#00FF9D
symbolIcon.structForeground#FFFF00
symbolIcon.textForeground#E5E7EB
symbolIcon.typeParameterForeground#3B82F6
symbolIcon.unitForeground#FFFF00
symbolIcon.variableForeground#3B82F6
tab.activeBackground#0A0E14
tab.activeBorder#00F0FF
tab.activeForeground#E5E7EB
tab.inactiveBackground#0A0E14
tab.inactiveBorder#1F2937
tab.inactiveForeground#6B7280
terminal.ansiBlack#0A0E14
terminal.ansiBlue#00F0FF
terminal.ansiBrightBlack#6B7280
terminal.ansiBrightBlue#33F0FF
terminal.ansiBrightCyan#5C9CFF
terminal.ansiBrightGreen#5CFFD1
terminal.ansiBrightMagenta#FF33FF
terminal.ansiBrightRed#FF8C42
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF33
terminal.ansiCyan#3B82F6
terminal.ansiGreen#00FF9D
terminal.ansiMagenta#FF00FF
terminal.ansiRed#FF6B00
terminal.ansiWhite#E5E7EB
terminal.ansiYellow#FFFF00
terminal.background#05080C
terminal.border#1F2937
terminal.foreground#E5E7EB
terminal.selectionBackground#1E3A5F80
terminalCursor.background#00F0FF
terminalCursor.foreground#05080C
textBlockQuote.background#121820
textBlockQuote.border#1F2937
textCodeBlock.background#121820
textLink.activeForeground#33F0FF
textLink.foreground#00F0FF
textPreformat.foreground#FF00FF
titleBar.activeBackground#0A0E14
titleBar.activeForeground#E5E7EB
titleBar.border#1F2937
titleBar.inactiveBackground#0A0E14
titleBar.inactiveForeground#6B7280
walkthrough.stepActive.foreground#00F0FF
walkthrough.stepDescription.foreground#6B7280
walkthrough.stepTitle.foreground#E5E7EB
warningBackground#3D2A0A
warningForeground#FFFF00
welcomePage.background#0A0E14
welcomePage.buttonBackground#1F2937
welcomePage.buttonHoverBackground#374151
widget.shadow#05080C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B7280	italic
keyword, storage.type, storage.modifier	#00F0FF	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow	#00F0FF	bold
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.loop.js, keyword.control.loop.ts	#00F0FF	bold
keyword.control.async.js, keyword.control.async.ts, storage.modifier.async.js, storage.modifier.async.ts	#00F0FF	bold
entity.name.function, support.function, meta.function-call	#FF00FF	—
meta.method, meta.method-call, entity.name.method	#FF00FF	—
storage.type.function.arrow.js, storage.type.function.arrow.ts, keyword.operator.arrow.js, keyword.operator.arrow.ts	#FF00FF	—
entity.name.class, entity.name.type.class, support.class, storage.type.class.js, storage.type.class.ts	#A855F7	—
entity.name.type, support.type, storage.type	#A855F7	—
entity.name.interface, entity.name.type.interface	#A855F7	—
variable, variable.other, variable.other.readwrite	#3B82F6	—
variable.language.this.js, variable.language.this.ts, variable.language.super.js, variable.language.super.ts	#FFFF00	bold
variable.other.constant, constant, constant.language, constant.numeric	#FFFF00	—
string, string.quoted, string.template	#00FF9D	—
string.template.js, string.template.ts	#00FF9D	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#FF6B00	—
constant.language.boolean, constant.language.true, constant.language.false	#FF6B00	bold
constant.language.null, constant.language.undefined, constant.language.nan	#FF6B00	italic
variable.other.property, meta.property-name, support.variable.property	#3B82F6	—
keyword.operator, punctuation.separator.key-value, punctuation.accessor	#00F0FF	—
keyword.operator.spread.js, keyword.operator.spread.ts, keyword.operator.rest.js, keyword.operator.rest.ts	#FF00FF	bold
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator	#E5E7EB	—
entity.name.tag, meta.tag, punctuation.definition.tag	#00F0FF	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx, meta.tag.js, meta.tag.tsx	#00F0FF	—
entity.other.attribute-name, meta.attribute-name	#3B82F6	—
entity.other.attribute-name.js, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx	#3B82F6	—
string.quoted.double, string.quoted.single	#00FF9D	—
meta.decorator, entity.name.decorator	#FF00FF	—
variable.parameter, variable.parameter.function	#3B82F6	—
entity.name.label	#FFFF00	—
entity.name.namespace, support.namespace	#FFFF00	—
entity.name.enum, entity.name.type.enum	#FFFF00	—
variable.other.enummember, constant.other.enum	#3B82F6	—
entity.name.function.constructor, support.function.constructor	#FF00FF	—
entity.name.module, support.module	#00F0FF	—
keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts, keyword.control.from.js, keyword.control.from.ts	#00F0FF	bold
string.regexp	#FF00FF	—
constant.character.escape	#FFFF00	—
invalid, invalid.illegal	#FF6B00	underline
invalid.deprecated	#6B7280	strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown	#00F0FF	bold
markup.bold, punctuation.definition.bold	#E5E7EB	bold
markup.italic, punctuation.definition.italic	#E5E7EB	italic
markup.underline.link, string.other.link	#00F0FF	underline
markup.raw, markup.raw.block	#00FF9D	—
markup.list, punctuation.definition.list	#FFFF00	—
markup.quote	#6B7280	italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag	#00F0FF	—
support.type.property-name, support.property-name	#3B82F6	—
support.constant.property-value, constant.other.color	#00FF9D	—
support.type.property-name.json, meta.key.json	#3B82F6	—
meta.value.json string.quoted.double.json	#00FF9D	—
entity.name.tag.yaml	#3B82F6	—
string.unquoted.yaml	#00FF9D	—
support.function.python, entity.name.function.python	#FF00FF	—
meta.decorator.python, entity.name.decorator.python	#FF00FF	—
variable.language.self.python, variable.language.cls.python	#FFFF00	—
storage.type.annotation.java, meta.annotation.java	#FF00FF	—
entity.name.function.go, support.function.go	#FF00FF	—
entity.name.function.macro.rust, meta.macro.rust	#FF00FF	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust	#FFFF00	—
entity.name.function.shell, support.function.builtin.shell	#FF00FF	bold
variable.other.shell, variable.other.readwrite.shell	#3B82F6	—
string.quoted.shell, string.unquoted.shell	#00FF9D	—
variable.parameter.shell	#FFFF00	—
markup.inserted.shell, string.success.shell	#00FF9D	bold
markup.changed.shell, string.warning.shell	#FFFF00	bold
markup.deleted.shell, string.error.shell	#FF6B00	bold

VS Code preview

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

Cyber Dark & Qoder Themes — JavaScript Vibrant Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#080A0C
activityBar.border#2C3E50
activityBar.foreground#E8E8E8
activityBar.inactiveForeground#8B949E
activityBarBadge.background#FF6B6B
activityBarBadge.foreground#0D0F12
breadcrumb.activeSelectionForeground#FF6B6B
breadcrumb.background#0D0F12
breadcrumb.focusForeground#E8E8E8
breadcrumb.foreground#8B949E
button.background#1E272E
button.foreground#E8E8E8
button.hoverBackground#2C3E50
button.secondaryBackground#1E272E
button.secondaryForeground#E8E8E8
button.secondaryHoverBackground#2C3E50
checkbox.background#1E272E
checkbox.border#2C3E50
checkbox.foreground#E8E8E8
contrastActiveBorder#FF6B6B
contrastBorder#FF6B6B
debugExceptionWidget.background#14171C
debugExceptionWidget.border#2C3E50
debugToolBar.background#14171C
debugToolBar.border#2C3E50
descriptionForeground#8B949E
diffEditor.insertedTextBackground#1A3D2A
diffEditor.insertedTextBorder#6BCB77
diffEditor.removedTextBackground#3D1A2A
diffEditor.removedTextBorder#FF6B9D
dropdown.background#14171C
dropdown.border#2C3E50
dropdown.foreground#E8E8E8
editor.background#0D0F12
editor.findMatchBackground#2C3E50
editor.findMatchHighlightBackground#1E272E
editor.foreground#E8E8E8
editor.inactiveSelectionBackground#14171C
editor.lineHighlightBackground#14171C
editor.selectionBackground#2C3E50
editor.selectionHighlightBackground#2C3E50
editorBracketMatch.background#2C3E50
editorBracketMatch.border#FF6B6B
editorCursor.foreground#FF6B6B
editorGhostText.foreground#8B949E
editorGroup.background#0D0F12
editorGroup.border#2C3E50
editorGroupHeader.tabsBackground#0D0F12
editorGroupHeader.tabsBorder#2C3E50
editorHoverWidget.background#14171C
editorHoverWidget.border#2C3E50
editorIndentGuide.activeBackground#2C3E50
editorIndentGuide.background#1E272E
editorLineNumber.activeForeground#E8E8E8
editorLineNumber.foreground#8B949E
editorOverviewRuler.border#2C3E50
editorOverviewRuler.bracketMatchForeground#FF6B6B
editorOverviewRuler.errorForeground#FF6B9D
editorOverviewRuler.findMatchForeground#FF6B9D
editorOverviewRuler.infoForeground#74B9FF
editorOverviewRuler.rangeHighlightForeground#2C3E50
editorOverviewRuler.selectionHighlightForeground#2C3E50
editorOverviewRuler.warningForeground#FFEAA7
editorSuggestWidget.background#14171C
editorSuggestWidget.border#2C3E50
editorSuggestWidget.highlightForeground#FF6B6B
editorSuggestWidget.selectedBackground#2C3E50
editorUnicodeHighlight.background#2C3E50
editorUnicodeHighlight.border#2C3E50
editorWhitespace.foreground#2C3E50
errorBackground#3D1A2A
errorForeground#FF6B9D
explorerFolderIcon.color#FF6B6B
extensionButton.prominentBackground#FF6B6B
extensionButton.prominentForeground#0D0F12
extensionButton.prominentHoverBackground#FF8C8C
focusBorder#FF6B6B
gitDecoration.addedResourceForeground#6BCB77
gitDecoration.conflictedResourceForeground#FF6B9D
gitDecoration.deletedResourceForeground#FF6B9D
gitDecoration.ignoredResourceForeground#8B949E
gitDecoration.modifiedResourceForeground#74B9FF
gitDecoration.untrackedResourceForeground#FFEAA7
infoBackground#1A2A3D
infoForeground#74B9FF
input.background#0D0F12
input.border#2C3E50
input.foreground#E8E8E8
input.placeholderForeground#8B949E
inputValidation.errorBackground#3D1A2A
inputValidation.errorBorder#FF6B9D
inputValidation.errorForeground#FF6B9D
inputValidation.infoBackground#1A2A3D
inputValidation.infoBorder#74B9FF
inputValidation.infoForeground#74B9FF
inputValidation.warningBackground#3D2A1A
inputValidation.warningBorder#FFEAA7
inputValidation.warningForeground#FFEAA7
list.activeSelectionBackground#2C3E50
list.activeSelectionForeground#E8E8E8
list.deemphasizedForeground#8B949E
list.errorForeground#FF6B9D
list.focusBackground#2C3E50
list.focusForeground#E8E8E8
list.highlightForeground#FF6B6B
list.hoverBackground#14171C
list.inactiveFocusBackground#14171C
list.inactiveFocusForeground#E8E8E8
list.inactiveSelectionBackground#14171C
list.inactiveSelectionForeground#E8E8E8
list.warningForeground#FFEAA7
menu.background#14171C
menu.border#2C3E50
menu.foreground#E8E8E8
menu.selectionBackground#2C3E50
menu.selectionForeground#E8E8E8
menu.separatorBackground#2C3E50
notificationCenter.background#14171C
notificationCenter.border#2C3E50
notifications.background#14171C
notifications.border#2C3E50
notifications.foreground#E8E8E8
notificationsErrorIcon.foreground#FF6B9D
notificationsInfoIcon.foreground#74B9FF
notificationsWarningIcon.foreground#FFEAA7
notificationToast.border#2C3E50
panel.background#080A0C
panel.border#2C3E50
panel.dropBackground#2C3E5040
panelSection.border#2C3E50
panelSection.dropBackground#2C3E5040
panelSectionHeader.background#0D0F12
panelSectionHeader.border#2C3E50
panelSectionHeader.foreground#E8E8E8
panelTitle.activeBorder#FF6B6B
panelTitle.activeForeground#E8E8E8
panelTitle.inactiveForeground#8B949E
pickerGroup.border#2C3E50
pickerGroup.foreground#8B949E
progressBar.background#FF6B6B
scrollbarSlider.activeBackground#FF6B6B
scrollbarSlider.background#2C3E50
scrollbarSlider.hoverBackground#3E4D5F
sideBar.background#0D0F12
sideBar.border#2C3E50
sideBar.foreground#E8E8E8
sideBarSectionHeader.background#0D0F12
sideBarSectionHeader.foreground#8B949E
sideBarTitle.foreground#E8E8E8
statusBar.background#0D0F12
statusBar.border#2C3E50
statusBar.debuggingBackground#0D0F12
statusBar.debuggingForeground#FF6B9D
statusBar.foreground#E8E8E8
statusBar.noFolderBackground#0D0F12
symbolIcon.arrayForeground#74B9FF
symbolIcon.booleanForeground#FF6B9D
symbolIcon.classForeground#FFEAA7
symbolIcon.colorForeground#FF9F43
symbolIcon.constantForeground#FFEAA7
symbolIcon.constructorForeground#FF9F43
symbolIcon.enumeratorForeground#FFEAA7
symbolIcon.enumeratorMemberForeground#74B9FF
symbolIcon.eventForeground#FFEAA7
symbolIcon.fieldForeground#74B9FF
symbolIcon.fileForeground#E8E8E8
symbolIcon.folderForeground#FF6B6B
symbolIcon.functionForeground#FF9F43
symbolIcon.interfaceForeground#FFEAA7
symbolIcon.keyForeground#74B9FF
symbolIcon.keywordForeground#FF6B6B
symbolIcon.methodForeground#FF9F43
symbolIcon.moduleForeground#FF6B6B
symbolIcon.namespaceForeground#FFEAA7
symbolIcon.nullForeground#8B949E
symbolIcon.numberForeground#FF6B9D
symbolIcon.objectForeground#74B9FF
symbolIcon.operatorForeground#FF6B6B
symbolIcon.packageForeground#FF6B6B
symbolIcon.propertyForeground#74B9FF
symbolIcon.referenceForeground#74B9FF
symbolIcon.snippetForeground#FF9F43
symbolIcon.stringForeground#6BCB77
symbolIcon.structForeground#FFEAA7
symbolIcon.textForeground#E8E8E8
symbolIcon.typeParameterForeground#74B9FF
symbolIcon.unitForeground#FFEAA7
symbolIcon.variableForeground#74B9FF
tab.activeBackground#0D0F12
tab.activeBorder#FF6B6B
tab.activeForeground#E8E8E8
tab.inactiveBackground#0D0F12
tab.inactiveBorder#2C3E50
tab.inactiveForeground#8B949E
terminal.ansiBlack#0D0F12
terminal.ansiBlue#FF6B6B
terminal.ansiBrightBlack#8B949E
terminal.ansiBrightBlue#FF9C9C
terminal.ansiBrightCyan#9CCBFF
terminal.ansiBrightGreen#8FD99E
terminal.ansiBrightMagenta#FFB573
terminal.ansiBrightRed#FF9CB8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFF2C7
terminal.ansiCyan#74B9FF
terminal.ansiGreen#6BCB77
terminal.ansiMagenta#FF9F43
terminal.ansiRed#FF6B9D
terminal.ansiWhite#E8E8E8
terminal.ansiYellow#FFEAA7
terminal.background#080A0C
terminal.border#2C3E50
terminal.foreground#E8E8E8
terminal.selectionBackground#2C3E5080
terminalCursor.background#FF6B6B
terminalCursor.foreground#080A0C
textBlockQuote.background#14171C
textBlockQuote.border#2C3E50
textCodeBlock.background#14171C
textLink.activeForeground#FF8C8C
textLink.foreground#FF6B6B
textPreformat.foreground#FF9F43
titleBar.activeBackground#0D0F12
titleBar.activeForeground#E8E8E8
titleBar.border#2C3E50
titleBar.inactiveBackground#0D0F12
titleBar.inactiveForeground#8B949E
walkthrough.stepActive.foreground#FF6B6B
walkthrough.stepDescription.foreground#8B949E
walkthrough.stepTitle.foreground#E8E8E8
warningBackground#3D2A1A
warningForeground#FFEAA7
welcomePage.background#0D0F12
welcomePage.buttonBackground#1E272E
welcomePage.buttonHoverBackground#2C3E50
widget.shadow#080A0C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8B949E	italic
keyword, storage.type, storage.modifier	#FF6B6B	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow	#FF6B6B	bold
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.loop.js, keyword.control.loop.ts	#FF6B6B	bold
keyword.control.async.js, keyword.control.async.ts, storage.modifier.async.js, storage.modifier.async.ts	#FF6B6B	bold
entity.name.function, support.function, meta.function-call	#FFD93D	—
meta.method, meta.method-call, entity.name.method	#FFD93D	—
storage.type.function.arrow.js, storage.type.function.arrow.ts, keyword.operator.arrow.js, keyword.operator.arrow.ts	#FFD93D	—
entity.name.class, entity.name.type.class, support.class, storage.type.class.js, storage.type.class.ts	#EE5A24	—
entity.name.type, support.type, storage.type	#EE5A24	—
entity.name.interface, entity.name.type.interface	#EE5A24	—
variable, variable.other, variable.other.readwrite	#FF9F43	—
variable.language.this.js, variable.language.this.ts, variable.language.super.js, variable.language.super.ts	#FFEAA7	bold
variable.other.constant, constant, constant.language, constant.numeric	#FFEAA7	—
string, string.quoted, string.template	#6BCB77	—
string.template.js, string.template.ts	#6BCB77	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#FF6B9D	—
constant.language.boolean, constant.language.true, constant.language.false	#FF6B9D	bold
constant.language.null, constant.language.undefined, constant.language.nan	#FF6B9D	italic
variable.other.property, meta.property-name, support.variable.property	#FF9F43	—
keyword.operator, punctuation.separator.key-value, punctuation.accessor	#FF6B6B	—
keyword.operator.spread.js, keyword.operator.spread.ts, keyword.operator.rest.js, keyword.operator.rest.ts	#FFD93D	bold
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator	#D1D5DB	—
entity.name.tag, meta.tag, punctuation.definition.tag	#FF6B6B	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx, meta.tag.js, meta.tag.tsx	#FF6B6B	—
entity.other.attribute-name, meta.attribute-name	#FF9F43	—
entity.other.attribute-name.js, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx	#FF9F43	—
string.quoted.double, string.quoted.single	#6BCB77	—
meta.decorator, entity.name.decorator	#FFD93D	—
variable.parameter, variable.parameter.function	#FF9F43	—
entity.name.label	#FFEAA7	—
entity.name.namespace, support.namespace	#FFEAA7	—
entity.name.enum, entity.name.type.enum	#FFEAA7	—
variable.other.enummember, constant.other.enum	#FF9F43	—
entity.name.function.constructor, support.function.constructor	#FFD93D	—
entity.name.module, support.module	#FF6B6B	—
keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts, keyword.control.from.js, keyword.control.from.ts	#FF6B6B	bold
string.regexp	#FFD93D	—
constant.character.escape	#FFEAA7	—
invalid, invalid.illegal	#FF6B9D	underline
invalid.deprecated	#8B949E	strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown	#FF6B6B	bold
markup.bold, punctuation.definition.bold	#E8E8E8	bold
markup.italic, punctuation.definition.italic	#E8E8E8	italic
markup.underline.link, string.other.link	#FF6B6B	underline
markup.raw, markup.raw.block	#6BCB77	—
markup.list, punctuation.definition.list	#FFEAA7	—
markup.quote	#8B949E	italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag	#FF6B6B	—
support.type.property-name, support.property-name	#FF9F43	—
support.constant.property-value, constant.other.color	#6BCB77	—
support.type.property-name.json, meta.key.json	#FF9F43	—
meta.value.json string.quoted.double.json	#6BCB77	—
entity.name.tag.yaml	#FF9F43	—
string.unquoted.yaml	#6BCB77	—
support.function.python, entity.name.function.python	#FFD93D	—
meta.decorator.python, entity.name.decorator.python	#FFD93D	—
variable.language.self.python, variable.language.cls.python	#FFEAA7	—
storage.type.annotation.java, meta.annotation.java	#FFD93D	—
entity.name.function.go, support.function.go	#FFD93D	—
entity.name.function.macro.rust, meta.macro.rust	#FFD93D	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust	#FFEAA7	—
entity.name.function.shell, support.function.builtin.shell	#FFD93D	bold
variable.other.shell, variable.other.readwrite.shell	#FF9F43	—
string.quoted.shell, string.unquoted.shell	#6BCB77	—
variable.parameter.shell	#FFEAA7	—
markup.inserted.shell, string.success.shell	#6BCB77	bold
markup.changed.shell, string.warning.shell	#FFEAA7	bold
markup.deleted.shell, string.error.shell	#FF6B9D	bold

VS Code preview

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

Cyber Dark & Qoder Themes — Qoder Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0A0A10
activityBar.border#242438
activityBar.foreground#E6E6F0
activityBar.inactiveForeground#7A7A99
activityBarBadge.background#8A6CFF
activityBarBadge.foreground#0F0F14
breadcrumb.activeSelectionForeground#8A6CFF
breadcrumb.background#0F0F14
breadcrumb.focusForeground#E6E6F0
breadcrumb.foreground#7A7A99
button.background#242438
button.foreground#E6E6F0
button.hoverBackground#3A3A52
button.secondaryBackground#242438
button.secondaryForeground#E6E6F0
button.secondaryHoverBackground#3A3A52
checkbox.background#242438
checkbox.border#242438
checkbox.foreground#E6E6F0
contrastActiveBorder#8A6CFF
contrastBorder#8A6CFF
debugExceptionWidget.background#1A1A24
debugExceptionWidget.border#242438
debugToolBar.background#1A1A24
debugToolBar.border#242438
descriptionForeground#7A7A99
diffEditor.insertedTextBackground#2A4D3A
diffEditor.insertedTextBorder#50FA7B
diffEditor.removedTextBackground#4D2A2A
diffEditor.removedTextBorder#FF5555
dropdown.background#1A1A24
dropdown.border#242438
dropdown.foreground#E6E6F0
editor.background#0F0F14
editor.findMatchBackground#4D3D8F
editor.findMatchHighlightBackground#2A2A3A
editor.foreground#E6E6F0
editor.inactiveSelectionBackground#1A1A24
editor.lineHighlightBackground#1A1A24
editor.selectionBackground#4D3D8F
editor.selectionHighlightBackground#4D3D8F
editorBracketMatch.background#4D3D8F
editorBracketMatch.border#8A6CFF
editorCursor.foreground#8A6CFF
editorGhostText.foreground#7A7A99
editorGroup.background#0F0F14
editorGroup.border#242438
editorGroupHeader.tabsBackground#0F0F14
editorGroupHeader.tabsBorder#242438
editorHoverWidget.background#1A1A24
editorHoverWidget.border#242438
editorIndentGuide.activeBackground#3A3A52
editorIndentGuide.background#242438
editorLineNumber.activeForeground#E6E6F0
editorLineNumber.foreground#7A7A99
editorOverviewRuler.border#242438
editorOverviewRuler.bracketMatchForeground#8A6CFF
editorOverviewRuler.errorForeground#FF5555
editorOverviewRuler.findMatchForeground#FF5555
editorOverviewRuler.infoForeground#8BE9FD
editorOverviewRuler.rangeHighlightForeground#4D3D8F
editorOverviewRuler.selectionHighlightForeground#4D3D8F
editorOverviewRuler.warningForeground#FFB86C
editorSuggestWidget.background#1A1A24
editorSuggestWidget.border#242438
editorSuggestWidget.highlightForeground#8A6CFF
editorSuggestWidget.selectedBackground#4D3D8F
editorUnicodeHighlight.background#4D3D8F
editorUnicodeHighlight.border#242438
editorWhitespace.foreground#3A3A52
errorBackground#4D2A2A
errorForeground#FF5555
explorerFolderIcon.color#8A6CFF
extensionButton.prominentBackground#8A6CFF
extensionButton.prominentForeground#0F0F14
extensionButton.prominentHoverBackground#A98EFF
focusBorder#8A6CFF
gitDecoration.addedResourceForeground#50FA7B
gitDecoration.conflictedResourceForeground#FF5555
gitDecoration.deletedResourceForeground#FF5555
gitDecoration.ignoredResourceForeground#7A7A99
gitDecoration.modifiedResourceForeground#8BE9FD
gitDecoration.untrackedResourceForeground#FFB86C
infoBackground#2A3D4D
infoForeground#8BE9FD
input.background#0F0F14
input.border#242438
input.foreground#E6E6F0
input.placeholderForeground#7A7A99
inputValidation.errorBackground#4D2A2A
inputValidation.errorBorder#FF5555
inputValidation.errorForeground#FF5555
inputValidation.infoBackground#2A3D4D
inputValidation.infoBorder#8BE9FD
inputValidation.infoForeground#8BE9FD
inputValidation.warningBackground#4D3D2A
inputValidation.warningBorder#FFB86C
inputValidation.warningForeground#FFB86C
list.activeSelectionBackground#4D3D8F
list.activeSelectionForeground#E6E6F0
list.deemphasizedForeground#7A7A99
list.errorForeground#FF5555
list.focusBackground#4D3D8F
list.focusForeground#E6E6F0
list.highlightForeground#8A6CFF
list.hoverBackground#1A1A24
list.inactiveFocusBackground#1A1A24
list.inactiveFocusForeground#E6E6F0
list.inactiveSelectionBackground#1A1A24
list.inactiveSelectionForeground#E6E6F0
list.warningForeground#FFB86C
menu.background#1A1A24
menu.border#242438
menu.foreground#E6E6F0
menu.selectionBackground#4D3D8F
menu.selectionForeground#E6E6F0
menu.separatorBackground#242438
notificationCenter.background#1A1A24
notificationCenter.border#242438
notifications.background#1A1A24
notifications.border#242438
notifications.foreground#E6E6F0
notificationsErrorIcon.foreground#FF5555
notificationsInfoIcon.foreground#8BE9FD
notificationsWarningIcon.foreground#FFB86C
notificationToast.border#242438
panel.background#0A0A12
panel.border#2A2A40
panel.dropBackground#4D3D8F40
panelSection.border#2A2A40
panelSection.dropBackground#4D3D8F40
panelSectionHeader.background#12121A
panelSectionHeader.border#2A2A40
panelSectionHeader.foreground#E6E6F0
panelTitle.activeBorder#8A6CFF
panelTitle.activeForeground#E6E6F0
panelTitle.inactiveForeground#7A7A99
pickerGroup.border#242438
pickerGroup.foreground#7A7A99
progressBar.background#8A6CFF
scrollbarSlider.activeBackground#8A6CFF
scrollbarSlider.background#242438
scrollbarSlider.hoverBackground#3A3A52
sideBar.background#0F0F14
sideBar.border#242438
sideBar.foreground#E6E6F0
sideBarSectionHeader.background#0F0F14
sideBarSectionHeader.foreground#7A7A99
sideBarTitle.foreground#E6E6F0
statusBar.background#0F0F14
statusBar.border#242438
statusBar.debuggingBackground#0F0F14
statusBar.debuggingForeground#FFB86C
statusBar.foreground#E6E6F0
statusBar.noFolderBackground#0F0F14
symbolIcon.arrayForeground#8BE9FD
symbolIcon.booleanForeground#FF5555
symbolIcon.classForeground#FFB86C
symbolIcon.colorForeground#BD93F9
symbolIcon.constantForeground#FFCB8B
symbolIcon.constructorForeground#BD93F9
symbolIcon.enumeratorForeground#FFB86C
symbolIcon.enumeratorMemberForeground#8BE9FD
symbolIcon.eventForeground#FFB86C
symbolIcon.fieldForeground#8BE9FD
symbolIcon.fileForeground#E6E6F0
symbolIcon.folderForeground#8A6CFF
symbolIcon.functionForeground#BD93F9
symbolIcon.interfaceForeground#FFB86C
symbolIcon.keyForeground#8BE9FD
symbolIcon.keywordForeground#8A6CFF
symbolIcon.methodForeground#BD93F9
symbolIcon.moduleForeground#8A6CFF
symbolIcon.namespaceForeground#FFB86C
symbolIcon.nullForeground#7A7A99
symbolIcon.numberForeground#FF5555
symbolIcon.objectForeground#8BE9FD
symbolIcon.operatorForeground#8A6CFF
symbolIcon.packageForeground#8A6CFF
symbolIcon.propertyForeground#8BE9FD
symbolIcon.referenceForeground#8BE9FD
symbolIcon.snippetForeground#BD93F9
symbolIcon.stringForeground#50FA7B
symbolIcon.structForeground#FFB86C
symbolIcon.textForeground#E6E6F0
symbolIcon.typeParameterForeground#8BE9FD
symbolIcon.unitForeground#FFB86C
symbolIcon.variableForeground#8BE9FD
tab.activeBackground#0F0F14
tab.activeBorder#8A6CFF
tab.activeForeground#E6E6F0
tab.inactiveBackground#0F0F14
tab.inactiveBorder#242438
tab.inactiveForeground#7A7A99
terminal.ansiBlack#12121A
terminal.ansiBlue#9D7CFF
terminal.ansiBrightBlack#4A4A6A
terminal.ansiBrightBlue#B89CFF
terminal.ansiBrightCyan#93E2FF
terminal.ansiBrightGreen#8AFFB8
terminal.ansiBrightMagenta#D9A8FF
terminal.ansiBrightRed#FF8E8E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFE082
terminal.ansiCyan#78D9FF
terminal.ansiGreen#6CFF9C
terminal.ansiMagenta#C77DFF
terminal.ansiRed#FF6B6B
terminal.ansiWhite#F0F0FF
terminal.ansiYellow#FFD166
terminal.background#0A0A12
terminal.border#2A2A40
terminal.foreground#E6E6F0
terminal.selectionBackground#4D3D8F80
terminalCursor.background#8A6CFF
terminalCursor.foreground#0A0A12
textBlockQuote.background#1A1A24
textBlockQuote.border#242438
textCodeBlock.background#1A1A24
textLink.activeForeground#A98EFF
textLink.foreground#8A6CFF
textPreformat.foreground#BD93F9
titleBar.activeBackground#0F0F14
titleBar.activeForeground#E6E6F0
titleBar.border#242438
titleBar.inactiveBackground#0F0F14
titleBar.inactiveForeground#7A7A99
walkthrough.stepActive.foreground#8A6CFF
walkthrough.stepDescription.foreground#7A7A99
walkthrough.stepTitle.foreground#E6E6F0
warningBackground#4D3D2A
warningForeground#FFB86C
welcomePage.background#0F0F14
welcomePage.buttonBackground#242438
welcomePage.buttonHoverBackground#3A3A52
widget.shadow#0A0A10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A7A99	italic
keyword, storage.type, storage.modifier	#8A6CFF	—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow	#8A6CFF	bold
entity.name.function, support.function, meta.function-call	#BD93F9	—
meta.method, meta.method-call, entity.name.method	#BD93F9	—
entity.name.class, entity.name.type.class, support.class	#FFB86C	—
entity.name.type, support.type, storage.type	#FFB86C	—
entity.name.interface, entity.name.type.interface	#FFB86C	—
variable, variable.other, variable.other.readwrite	#8BE9FD	—
variable.other.constant, constant, constant.language, constant.numeric	#FFCB8B	—
string, string.quoted, string.template	#50FA7B	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#FF5555	—
constant.language.boolean, constant.language.true, constant.language.false	#FF5555	bold
constant.language.null, constant.language.undefined, constant.language.nan	#FF5555	italic
variable.other.property, meta.property-name, support.variable.property	#8BE9FD	—
keyword.operator, punctuation.separator.key-value, punctuation.accessor	#8A6CFF	—
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator	#E6E6F0	—
entity.name.tag, meta.tag, punctuation.definition.tag	#8A6CFF	—
entity.other.attribute-name, meta.attribute-name	#8BE9FD	—
string.quoted.double, string.quoted.single	#50FA7B	—
meta.decorator, entity.name.decorator	#BD93F9	—
variable.parameter, variable.parameter.function	#8BE9FD	—
entity.name.label	#FFB86C	—
entity.name.namespace, support.namespace	#FFB86C	—
entity.name.enum, entity.name.type.enum	#FFB86C	—
variable.other.enummember, constant.other.enum	#8BE9FD	—
entity.name.function.constructor, support.function.constructor	#BD93F9	—
entity.name.module, support.module	#8A6CFF	—
string.regexp	#BD93F9	—
constant.character.escape	#FFCB8B	—
invalid, invalid.illegal	#FF5555	underline
invalid.deprecated	#7A7A99	strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown	#8A6CFF	bold
markup.bold, punctuation.definition.bold	#E6E6F0	bold
markup.italic, punctuation.definition.italic	#E6E6F0	italic
markup.underline.link, string.other.link	#8A6CFF	underline
markup.raw, markup.raw.block	#50FA7B	—
markup.list, punctuation.definition.list	#FFB86C	—
markup.quote	#7A7A99	italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag	#8A6CFF	—
support.type.property-name, support.property-name	#8BE9FD	—
support.constant.property-value, constant.other.color	#50FA7B	—
support.type.property-name.json, meta.key.json	#8BE9FD	—
meta.value.json string.quoted.double.json	#50FA7B	—
entity.name.tag.yaml	#8BE9FD	—
string.unquoted.yaml	#50FA7B	—
support.function.python, entity.name.function.python	#BD93F9	—
meta.decorator.python, entity.name.decorator.python	#BD93F9	—
variable.language.self.python, variable.language.cls.python	#FFB86C	—
storage.type.js, storage.type.ts, keyword.control.flow.js, keyword.control.flow.ts	#8A6CFF	—
storage.type.function.arrow.js, storage.type.function.arrow.ts	#8A6CFF	—
string.template.js, string.template.ts	#50FA7B	—
entity.name.tag.js, entity.name.tag.tsx, support.class.component.js, support.class.component.tsx	#8A6CFF	—
storage.type.annotation.java, meta.annotation.java	#BD93F9	—
entity.name.function.go, support.function.go	#BD93F9	—
entity.name.function.macro.rust, meta.macro.rust	#BD93F9	—
storage.modifier.lifetime.rust, entity.name.lifetime.rust	#FFB86C	—
entity.name.function.shell, support.function.builtin.shell	#C77DFF	bold
variable.other.shell, variable.other.readwrite.shell	#78D9FF	—
string.quoted.shell, string.unquoted.shell	#6CFF9C	—
variable.parameter.shell	#FFD166	—
markup.inserted.shell, string.success.shell	#6CFF9C	bold
markup.changed.shell, string.warning.shell	#FFD166	bold
markup.deleted.shell, string.error.shell	#FF6B6B	bold