The Best Themes for programmers

Name: The Best Themes for programmers
Author: Estevam Souza

Publisher: Estevam SouzaThemes in package: 127

🎨🚀 A never seen collection of 165 hand crafted themes no where to be found on Internet 💻

Open in VS Code GitHub

Color themes

VS Code preview

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

The Best Themes for programmers — Outrun 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#161130
activityBar.foreground#7984D1
activityBarBadge.background#ff2e97
activityBarBadge.foreground#ffffff
button.background#1ea8fc
button.foreground#f9faff
button.hoverBackground#1ea8fc
descriptionForeground#f9faff
editor.background#161130
editor.findMatchBackground#484f7d
editor.findMatchHighlightBackground#484f7d80
editor.foreground#ebecf8
editor.hoverHighlightBackground#42c6ff2a
editor.lineHighlightBackground#161130
editor.selectionBackground#484f7d
editor.selectionHighlightBackground#484f7d8e
editor.wordHighlightBackground#ffffff22
editor.wordHighlightStrongBackground#42c6ff63
editorCursor.foreground#ff2e97
editorError.foreground#ff2e97
editorGroup.dropBackground#7984D1
editorGroupHeader.noTabsBackground#0c0a20
editorGroupHeader.tabsBackground#0c0a20
editorHoverWidget.background#3b4167
editorHoverWidget.border#3b4167
editorIndentGuide.activeBackground#484f7d
editorIndentGuide.background#2d2844
editorInfo.foreground#7984D1
editorLineNumber.activeForeground#42c6ff
editorLineNumber.foreground#484f7d
editorRuler.foreground#484f7d
editorWarning.foreground#ff9b50
editorWidget.background#484f7d
editorWidget.border#484f7d
foreground#f9faff
gitDecoration.conflictingResourceForeground#df85ff
gitDecoration.deletedResourceForeground#ff2e97
gitDecoration.ignoredResourceForeground#7984D1
gitDecoration.modifiedResourceForeground#ffd400
gitDecoration.untrackedResourceForeground#42c6ff
input.background#161130
input.border#763b8c
input.placeholderForeground#7984D1
inputOption.activeBorder#ff9b50
list.activeSelectionBackground#d86bff
list.activeSelectionForeground#ffffff
list.dropBackground#7984D1
list.errorForeground#ff2e97
list.focusBackground#8a45a3
list.hoverBackground#8a45a3
list.inactiveSelectionBackground#161130
list.warningForeground#ff2e97
panel.background#0c0a20
panel.border#0c0a20
panel.dropBackground#7983d194
panelTitle.activeBorder#1ea8fc
panelTitle.activeForeground#f9faff
panelTitle.inactiveForeground#7984D1
peekView.border#ff9b50
peekViewEditor.background#110d26
peekViewEditor.matchHighlightBackground#161130
peekViewEditor.matchHighlightBorder#161130
peekViewResult.background#0c0a20
peekViewResult.selectionBackground#ff9b50
peekViewTitle.background#0c0a20
peekViewTitleDescription.foreground#7984D1
progressBar.background#ff2e97
scrollbar.shadow#0c0a20
scrollbarSlider.activeBackground#919ad9
scrollbarSlider.background#9199d94f
scrollbarSlider.hoverBackground#9199d9b4
sideBar.background#0c0a20
sideBarSectionHeader.background#161130
sideBarSectionHeader.foreground#7984D1
statusBar.background#0c0a20
statusBar.foreground#7984D1
statusBar.noFolderBackground#1ea8fc
statusBar.noFolderForeground#ffffff
tab.activeBackground#161130
tab.activeForeground#f9faff
tab.border#161130
tab.inactiveBackground#0c0a20
tab.inactiveForeground#7984D1
terminal.ansiBlack#283034
terminal.ansiBlue#42c6ff
terminal.ansiBrightBlack#435056
terminal.ansiBrightBlue#42c6ff
terminal.ansiBrightCyan#42c6ff
terminal.ansiBrightGreen#add0e5
terminal.ansiBrightMagenta#ff2afc
terminal.ansiBrightRed#ff2e97
terminal.ansiBrightWhite#f4f6f9
terminal.ansiBrightYellow#ffd400
terminal.ansiCyan#42c6ff
terminal.ansiGreen#62a9cf
terminal.ansiMagenta#ff2afc
terminal.ansiRed#ff2e97
terminal.ansiWhite#d9e0e9
terminal.ansiYellow#ffd400
terminal.background#0c0a20
terminal.foreground#e4eeff
titleBar.activeBackground#0c0a20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.quoted.docstring.multi.python	#546A90	italic
string	#7984D1	—
constant.numeric	#ffd400	—
constant.language	#df85ff	—
constant.character, constant.other	#df85ff	—
variable	—
keyword	#ff2afc	—
storage	#42c6ff
storage.type	#ff2e97
entity.name.class, entity.name.type.class	#A875FF	italic
entity.other.inherited-class, meta.other.inherited-class.php	#ffd400	italic
entity.name.function - meta.function-call	#ff9b50
variable.parameter	#FFFFFF
entity.name.tag	#42c6ff
entity.other.attribute-name	#ff2afc
support.function	#ff9b50
support.constant	#A3D6E0
support.type, support.class	#42c6ff	italic
support.other.variable	—
variable.language.this.js, variable.language.super.js, variable.language.this.php	#42c6ff	italic
invalid	#cf433e
invalid.deprecated	#cf433e	—
meta.diff, meta.diff.header	#456b7c	—
markup.deleted	#e61f44	—
markup.inserted	#A6E22E	—
markup.changed	#f7b83d	—
constant.numeric.line-number.find-in-files - match	#8FBE00A0	—
entity.name.filename.find-in-files	#E6DB74	—
keyword.other	#6494a9	—
meta.property-value, support.constant.property-value, constant.other.color	#cccccc	—
meta.structure.dictionary.json string.quoted.double.json	#FF0081	—
support.type.property-name.json	#D86BFF
meta.structure.dictionary.value.json string.quoted.double.json	#F8F8F2	—
meta.property-name support.type.property-name	—
meta.property-value punctuation.separator.key-value	#b6ced8	—
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as	#ff2afc	—
support.other.namespace.php	#F8F8F2	—
meta.use	#1ea8fc
variable.other	#ffffff
keyword.other.phpdoc.php	#A875FF
keyword.other.type.php, meta.other.type.phpdoc.php	#7984D1	—
variable.parameter.function.coffee	#aaaaaa
entity.name.section.markdown	#5dcdfd	—
punctuation.definition.heading.markdown	#1ea8fc	—
markup.raw.inline.markdown	#cccccc	—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#1ea8fc	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#1ea8fc	—
punctuation.definition.metadata.markdown	#1ea8fc	—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown	#1ea8fc
markup.bold.markdown, markup.italic.markdown	#1ea8fc	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
markup.raw.block.markdown	#664e4d	—
markup.deleted.git_gutter	#e61f44	—
markup.inserted.git_gutter	#a7da1e	—
markup.changed.git_gutter	#f7b83d	—
meta.template.expression	#b6ced8	—

VS Code preview

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

The Best Themes for programmers — Rasengan Glacier

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#66282800
activityBar.background#000000
activityBar.foreground#16deff
activityBar.inactiveForeground#8c8c8c66
activityBarBadge.background#007acc00
activityBarBadge.foreground#16deff
badge.background#4d4d4d00
badge.foreground#16deff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#000000
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#16deff
button.background#16deff
button.foreground#000000
button.hoverBackground#ffffff
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#000000
checkbox.border#00000000
checkbox.foreground#16deff
debugExceptionWidget.background#333333
debugExceptionWidget.border#474747
debugToolBar.background#020101
debugToolBar.border#474747
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#000000
dropdown.border#00000000
dropdown.foreground#16deff
editor.background#000000
editor.findMatchBackground#515c6a
editor.findMatchBorder#74879f
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#d4d4d4
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0A
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#00d0ff92
editor.selectionHighlightBackground#00d0ff
editor.selectionHighlightBorder#00d0ff
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#000000
editorCursor.foreground#aeafad
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.emptyBackground#000000
editorGroupHeader.border#ff000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#ff545400
editorGutter.addedBackground#587c0c
editorGutter.background#000000
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#252526
editorHoverWidget.border#454545
editorHoverWidget.foreground#cccccc
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#75beff
editorLineNumber.activeForeground#16deff
editorLineNumber.foreground#a5a1a1
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#252526
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#0097fb
editorSuggestWidget.selectedBackground#062f4a
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.foreground#cccccc
editorWidget.resizeBorder#5F5F5F
focusBorder#007fd400
foreground#16deff
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#16deff
input.background#000000
input.border#00000000
input.foreground#16deff
input.placeholderForeground#16deff
inputOption.activeBackground#04070866
inputOption.activeBorder#007acc00
inputOption.activeForeground#16deff
list.activeSelectionBackground#16deff
list.activeSelectionForeground#000000
list.dropBackground#ffffff
list.focusBackground#ffffff
list.focusForeground#000000
list.highlightForeground#16deff
list.hoverBackground#ffffff
list.hoverForeground#080505
list.inactiveSelectionBackground#ffffff
list.inactiveSelectionForeground#030606
listFilterWidget.background#16deff
listFilterWidget.noMatchesOutline#e4e4e4
listFilterWidget.outline#00000000
menu.background#171717
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#16deff
menu.selectionBorder#00000000
menu.selectionForeground#000000
menu.separatorBackground#16deff
menubar.selectionBackground#ffffff
menubar.selectionForeground#000000
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#000000
minimap.errorHighlight#f48771
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#264f78
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#474747
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#cccccc
notifications.background#252526
notifications.border#303031
notifications.foreground#cccccc
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#474747
panel.background#000000
panel.border#16deff
panelSection.border#16deff
panelTitle.activeBorder#16deff
panelTitle.activeForeground#16deff
panelTitle.inactiveForeground#888888
peekView.border#007acc
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#3794ff
progressBar.background#16deff
scrollbar.shadow#16deff
scrollbarSlider.activeBackground#ffffff
scrollbarSlider.background#16deff
scrollbarSlider.hoverBackground#16deff
selection.background#282828
settings.focusedRowBackground#ffffff07
settings.headerForeground#16deff
sideBar.background#000000
sideBar.dropBackground#ffffff
sideBar.foreground#7e7e7e
sideBarSectionHeader.background#16deff
sideBarSectionHeader.border#ff010100
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#16deff
statusBar.background#16deff
statusBar.border#d7d7d700
statusBar.debuggingBackground#e84c00
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#b3b3b3
statusBar.foreground#000000
statusBar.noFolderBackground#c100f2
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#015fd7
statusBarItem.remoteBackground#ffffff
statusBarItem.remoteForeground#0f0909
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#050505
tab.border#25252626
tab.hoverBackground#16deff
tab.hoverBorder#ff000000
tab.hoverForeground#000000
tab.inactiveBackground#000000
tab.inactiveForeground#ffffff80
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#16deff
terminal.foreground#fff
terminal.selectionBackground#00e5ffac
terminalCursor.background#16deff
terminalCursor.foreground#16deff
textLink.foreground#3794ff
titleBar.activeBackground#16deff
titleBar.activeForeground#000000
titleBar.border#00000000
titleBar.inactiveBackground#16deff
titleBar.inactiveForeground#000000
tree.indentGuidesStroke#16deff
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison	#00ffe7	—
variable.other.generic-type.haskell	#ffffff	—
storage.type.haskell	#04ff08	—
support.variable.magic.python	#00ffe7	—
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python	#d4d4d4	—
variable.parameter.function.language.special.self.python	#00ff1c	—
storage.modifier.lifetime.rust	#d4d4d4	—
support.function.std.rust	#00dbff	—
entity.name.lifetime.rust	#00ff1c	—
variable.language.rust	#00ffe7	—
support.constant.edge	#ffffff	—
constant.other.character-class.regexp	#00ffe7	—
keyword.operator.quantifier.regexp	#04ff08	—
punctuation.definition.string.begin,punctuation.definition.string.end	#6bff00	—
variable.parameter.function	#d4d4d4	—
comment markup.link	#737373	—
markup.changed.diff	#00ff1c	—
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff	#00dbff	—
markup.inserted.diff	#6bff00	—
markup.deleted.diff	#00ffe7	—
meta.function.c,meta.function.cpp	#00ffe7	—
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c	#d4d4d4	—
punctuation.separator.key-value	#d4d4d4	—
keyword.operator.expression.import	#00dbff	—
support.constant.math	#00ff1c	—
support.constant.property.math	#04ff08	—
variable.other.constant	#00ff1c	—
storage.type.annotation.java, storage.type.object.array.java	#00ff1c	—
source.java	#00ffe7	—
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java	#d4d4d4	—
meta.method.java	#00dbff	—
storage.modifier.import.java,storage.type.java,storage.type.generic.java	#00ff1c	—
keyword.operator.instanceof.java	#ffffff	—
meta.definition.variable.name.java	#00ffe7	—
keyword.operator.logical	#00ffff	—
keyword.operator.bitwise	#00ffff	—
keyword.operator.channel	#00ffff	—
support.constant.property-value.scss,support.constant.property-value.css	#04ff08	—
keyword.operator.css,keyword.operator.scss,keyword.operator.less	#00ffff	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#04ff08	—
punctuation.separator.list.comma.css	#d4d4d4	—
support.constant.color.w3c-standard-color-name.css	#04ff08	—
support.type.vendored.property-name.css	#00ffff	—
support.module.node,support.type.object.module,support.module.node	#00ff1c	—
entity.name.type.module	#00ff1c	—
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node	#00ffe7	—
support.constant.json	#04ff08	—
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof	#ffffff	—
support.type.object.console	#00ffe7	—
support.variable.property.process	#04ff08	—
entity.name.function,support.function.console	#00dbff	—
keyword.operator.misc.rust	#d4d4d4	—
keyword.operator.sigil.rust	#ffffff	—
keyword.operator.delete	#ffffff	—
support.type.object.dom	#00ffff	—
support.variable.dom,support.variable.property.dom	#00ffe7	—
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational	#00ffff	—
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp	#ffffff	—
punctuation.separator.delimiter	#d4d4d4	—
punctuation.separator.c,punctuation.separator.cpp	#ffffff	—
support.type.posix-reserved.c,support.type.posix-reserved.cpp	#00ffff	—
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp	#ffffff	—
variable.parameter.function.language.python	#04ff08	—
support.type.python	#00ffff	—
keyword.operator.logical.python	#ffffff	—
variable.parameter.function.python	#04ff08	—
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python	#d4d4d4	—
meta.function-call.generic.python	#00dbff	—
constant.character.format.placeholder.other.python	#04ff08	—
keyword.operator	#d4d4d4	—
keyword.operator.assignment.compound	#ffffff	—
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts	#00ffff	—
keyword	#ffffff	—
entity.name.namespace	#00ff1c	—
variable	#00ffe7	—
variable.c	#d4d4d4	—
variable.language	#00ff1c	—
token.variable.parameter.java	#d4d4d4	—
import.storage.java	#00ff1c	—
token.package.keyword	#ffffff	—
token.package	#d4d4d4	—
entity.name.function, meta.require, support.function.any-method, variable.function	#00dbff	—
entity.name.type.namespace	#00ff1c	—
support.class, entity.name.type.class	#00ff1c	—
entity.name.class.identifier.namespace.type	#00ff1c	—
entity.name.class, variable.other.class.js, variable.other.class.ts	#00ff1c	—
variable.other.class.php	#00ffe7	—
entity.name.type	#00ff1c	—
keyword.control	#ffffff	—
control.elements, keyword.operator.less	#04ff08	—
keyword.other.special-method	#00dbff	—
storage	#ffffff	—
token.storage	#ffffff	—
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void	#ffffff	—
token.storage.type.java	#00ff1c	—
support.function	#00ffff	—
support.type.property-name	#d4d4d4	—
support.constant.property-value	#d4d4d4	—
support.constant.font-name	#04ff08	—
meta.tag	#d4d4d4	—
string	#6bff00	—
entity.other.inherited-class	#00ff1c	—
constant.other.symbol	#00ffff	—
constant.numeric	#04ff08	—
constant	#04ff08	—
punctuation.definition.constant	#04ff08	—
entity.name.tag	#00ffe7	—
entity.other.attribute-name	#04ff08	—
entity.other.attribute-name.id	#00dbff	normal
entity.other.attribute-name.class.css	#04ff08	normal
meta.selector	#ffffff	—
markup.heading	#00ffe7	—
markup.heading punctuation.definition.heading, entity.name.section	#00dbff	—
keyword.other.unit	#00ffe7	—
markup.bold,todo.bold	#04ff08	—
punctuation.definition.bold	#00ff1c	—
markup.italic, punctuation.definition.italic,todo.emphasis	#ffffff	—
emphasis md	#ffffff	—
entity.name.section.markdown	#00ffe7	—
punctuation.definition.heading.markdown	#00ffe7	—
punctuation.definition.list.begin.markdown	#00ffe7	—
markup.heading.setext	#d4d4d4	—
punctuation.definition.bold.markdown	#04ff08	—
markup.inline.raw.markdown	#6bff00	—
markup.inline.raw.string.markdown	#6bff00	—
punctuation.definition.list.markdown	#00ffe7	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown	#00ffe7	—
beginning.punctuation.definition.list.markdown	#00ffe7	—
punctuation.definition.metadata.markdown	#00ffe7	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#ffffff	—
string.other.link.title.markdown,string.other.link.description.markdown	#00dbff	—
string.regexp	#00ffff	—
constant.character.escape	#00ffff	—
punctuation.section.embedded, variable.interpolation	#00ffe7	—
punctuation.section.embedded.begin,punctuation.section.embedded.end	#ffffff	—
invalid.illegal	#ffffff	—
invalid.illegal.bad-ampersand.html	#d4d4d4	—
invalid.broken	#ffffff	—
invalid.deprecated	#ffffff	—
invalid.unimplemented	#ffffff	—
source.json meta.structure.dictionary.json > string.quoted.json	#00ffe7	—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string	#00ffe7	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation	#6bff00	—
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json	#00ffff	—
support.type.property-name.json	#00ffe7	—
support.type.property-name.json punctuation	#00ffe7	—
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade	#ffffff	—
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade	#ffffff	—
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php	#00ff1c	—
keyword.operator.error-control.php	#ffffff	—
keyword.operator.type.php	#ffffff	—
punctuation.section.array.begin.php	#d4d4d4	—
punctuation.section.array.end.php	#d4d4d4	—
invalid.illegal.non-null-typehinted.php	#f44747	—
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php	#00ff1c	—
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php	#00dbff	—
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php	#d4d4d4	—
support.constant.core.rust	#04ff08	—
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php	#04ff08	—
entity.name.goto-label.php,support.other.php	#00dbff	—
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php	#00ffff	—
keyword.operator.regexp.php	#ffffff	—
keyword.operator.comparison.php	#00ffff	—
keyword.operator.heredoc.php,keyword.operator.nowdoc.php	#ffffff	—
meta.function.decorator.python	#00dbff	—
support.token.decorator.python,meta.function.decorator.identifier.python	#00ffff	—
function.parameter	#d4d4d4	—
function.brace	#d4d4d4	—
function.parameter.ruby, function.parameter.cs	#d4d4d4	—
constant.language.symbol.ruby	#00ffff	—
rgb-value	#00ffff	—
inline-color-decoration rgb-value	#04ff08	—
less rgb-value	#04ff08	—
selector.sass	#00ffe7	—
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx	#00ff1c	—
block.scope.end,block.scope.begin	#d4d4d4	—
storage.type.cs	#00ff1c	—
entity.name.variable.local.cs	#00ffe7	—
token.info-token	#00dbff	—
token.warn-token	#04ff08	—
token.error-token	#f44747	—
token.debug-token	#ffffff	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#ffffff	—
meta.template.expression	#d4d4d4	—
keyword.operator.module	#ffffff	—
support.type.type.flowtype	#00dbff	—
support.type.primitive	#00ff1c	—
meta.property.object	#00ffe7	—
variable.parameter.function.js	#00ffe7	—
keyword.other.template.begin	#6bff00	—
keyword.other.template.end	#6bff00	—
keyword.other.substitution.begin	#6bff00	—
keyword.other.substitution.end	#6bff00	—
keyword.operator.assignment	#00ffff	—
keyword.operator.assignment.go	#00ff1c	—
keyword.operator.arithmetic.go, keyword.operator.address.go	#ffffff	—
entity.name.package.go	#00ff1c	—
support.type.prelude.elm	#00ffff	—
support.constant.elm	#04ff08	—
punctuation.quasi.element	#ffffff	—
constant.character.entity	#00ffe7	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#00ffff	—
entity.global.clojure	#00ff1c	—
meta.symbol.clojure	#00ffe7	—
constant.keyword.clojure	#00ffff	—
meta.arguments.coffee, variable.parameter.function.coffee	#00ffe7	—
source.ini	#6bff00	—
meta.scope.prerequisites.makefile	#00ffe7	—
source.makefile	#00ff1c	—
storage.modifier.import.groovy	#00ff1c	—
meta.method.groovy	#00dbff	—
meta.definition.variable.name.groovy	#00ffe7	—
meta.definition.class.inherited.classes.groovy	#6bff00	—
support.variable.semantic.hlsl	#00ff1c	—
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl	#ffffff	—
text.variable, text.bracketed	#00ffe7	—
support.type.swift, support.type.vb.asp	#00ff1c	—
entity.name.function.xi	#00ff1c	—
entity.name.class.xi	#00ffff	—
constant.character.character-class.regexp.xi	#00ffe7	—
constant.regexp.xi	#ffffff	—
keyword.control.xi	#00ffff	—
invalid.xi	#d4d4d4	—
beginning.punctuation.definition.quote.markdown.xi	#6bff00	—
beginning.punctuation.definition.list.markdown.xi	#737373	—
constant.character.xi	#00dbff	—
accent.xi	#00dbff	—
wikiword.xi	#04ff08	—
constant.other.color.rgb-value.xi	#ffffff	—
punctuation.definition.tag.xi	#737373	—
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition	#00ff1c	—
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#00ffe7	—
meta.brace.square	#d4d4d4	—
comment, punctuation.definition.comment	#545454	italic
markup.quote.markdown	#737373	—
punctuation.definition.block.sequence.item.yaml	#d4d4d4	—
constant.language.symbol.elixir	#00ffff	—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super	—	italic
comment.line.double-slash,comment.block.documentation	—	italic
keyword.control.import.python,keyword.control.flow.python	—	italic
markup.italic.markdown	—	italic

VS Code preview

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

The Best Themes for programmers — Sage Mode

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#0D0F11
activityBar.border#0D0F1160
activityBar.foreground#FFAA84
activityBarBadge.background#FF793E
activityBarBadge.foreground#0D0F11
badge.background#0D0F1130
badge.foreground#E86E38
breadcrumb.activeSelectionForeground#E86E38
breadcrumb.background#0D0F11
breadcrumb.focusForeground#FFAA84
breadcrumb.foreground#F9763C
breadcrumbPicker.background#0D0F11
button.background#E86E3850
contrastBorder#E86E3840
debugToolBar.background#0D0F11
diffEditor.insertedTextBackground#A9190315
diffEditor.removedTextBackground#E3210520
dropdown.background#0D0F11
dropdown.border#FFC29B10
editor.background#0D0F11
editor.findMatchBackground#0D0F11
editor.findMatchBorder#E86E38
editor.findMatchHighlightBackground#E86E3893
editor.findMatchHighlightBorder#FFC29B30
editor.foreground#FFAA84
editor.lineHighlightBackground#0D0F1150
editor.selectionBackground#FF793E30
editor.selectionHighlightBackground#E86E386b
editor.selectionHighlightBorder#FF793Ef0
editorBracketMatch.background#0D0F11
editorBracketMatch.border#F724057f
editorCursor.foreground#FFAA84
editorError.foreground#E3210570
editorGroup.border#0D0F1130
editorGroupHeader.tabsBackground#0D0F11
editorGutter.addedBackground#A9190360
editorGutter.deletedBackground#E3210560
editorGutter.modifiedBackground#FF793E60
editorHoverWidget.background#0D0F11
editorHoverWidget.border#FFC29B10
editorIndentGuide.activeBackground#171B1D
editorIndentGuide.background#171B1D70
editorInfo.foreground#FF793E70
editorLineNumber.activeForeground#FF793E
editorLineNumber.foreground#E86E38c0
editorLink.activeForeground#FFAA84
editorMarkerNavigation.background#FFAA8405
editorOverviewRuler.border#0D0F11
editorOverviewRuler.errorForeground#E3210540
editorOverviewRuler.findMatchForeground#E86E38
editorOverviewRuler.infoForeground#FF793E40
editorOverviewRuler.warningForeground#F7240570
editorRuler.foreground#171B1D
editorSuggestWidget.background#0D0F11
editorSuggestWidget.border#FFC29B10
editorSuggestWidget.foreground#FFAA84
editorSuggestWidget.highlightForeground#F72405
editorSuggestWidget.selectedBackground#E86E3820
editorWarning.foreground#A91903
editorWhitespace.foreground#FFAA8440
editorWidget.background#0D0F11
editorWidget.border#F72405
editorWidget.resizeBorder#E86E38
extensionButton.prominentBackground#A9190390
extensionButton.prominentHoverBackground#E32105
focusBorder#FFC29B00
gitDecoration.conflictingResourceForeground#F72405
gitDecoration.deletedResourceForeground#E32105
gitDecoration.ignoredResourceForeground#E86E38
gitDecoration.modifiedResourceForeground#F9763C
gitDecoration.untrackedResourceForeground#FF793E
input.background#121517
input.border#FFC29B10
input.foreground#FFAA84
input.placeholderForeground#FFAA8460
inputOption.activeBackground#FFAA8430
inputOption.activeBorder#FFAA8430
inputValidation.errorBorder#E3210550
inputValidation.infoBorder#FF793E50
inputValidation.warningBorder#F7240550
list.activeSelectionBackground#0D0F11
list.activeSelectionForeground#E86E38
list.focusBackground#121517
list.focusForeground#FF793E
list.highlightForeground#E86E38
list.hoverBackground#171B1D
list.hoverForeground#FFC29B
list.inactiveSelectionBackground#0D0F1130
list.inactiveSelectionForeground#E86E38
list.warningForeground#F72405
listFilterWidget.background#0D0F1130
listFilterWidget.noMatchesOutline#0D0F1130
listFilterWidget.outline#0D0F1130
menu.background#0D0F11f8
menu.border#E86E3850
menu.foreground#FFAA84
menu.selectionBackground#121517
menu.selectionBorder#0D0F1130
menu.selectionForeground#FFAA84
menu.separatorBackground#FFAA84
menubar.selectionBackground#121517
menubar.selectionBorder#E86E3850
menubar.selectionForeground#FFAA84
minimap.background#0D0F11
minimapGutter.addedBackground#E32105
minimapGutter.deletedBackground#F72405
minimapGutter.modifiedBackground#A91903
minimapSlider.activeBackground#A91903b0
minimapSlider.background#A9190380
minimapSlider.hoverBackground#A91903a0
notificationLink.foreground#E86E38
notifications.background#0D0F11
notifications.foreground#FFAA84
panel.background#0D0F11
panel.border#0D0F1160
panelTitle.activeBorder#E86E38
panelTitle.activeForeground#FFC29B
panelTitle.inactiveForeground#FFAA84
peekView.border#0D0F1130
peekViewEditor.background#FFAA8405
peekViewEditor.matchHighlightBackground#E86E3850
peekViewEditorGutter.background#FFAA8405
peekViewResult.background#FFAA8405
peekViewResult.matchHighlightBackground#E86E3850
peekViewResult.selectionBackground#E86E3870
peekViewTitle.background#FFAA8405
peekViewTitleDescription.foreground#FFAA8460
pickerGroup.foreground#E86E38
progressBar.background#E86E38
scrollbar.shadow#0D0F1100
scrollbarSlider.activeBackground#E86E38cc
scrollbarSlider.background#E86E38bb
scrollbarSlider.hoverBackground#E86E38ee
selection.background#E86E38
settings.checkboxBackground#0D0F11
settings.checkboxForeground#FFAA84
settings.dropdownBackground#0D0F11
settings.dropdownForeground#FFAA84
settings.headerForeground#E86E38
settings.modifiedItemIndicator#E86E38
settings.numberInputBackground#0D0F11
settings.numberInputForeground#FFAA84
settings.textInputBackground#0D0F11
settings.textInputForeground#FFAA84
sideBar.background#0D0F11
sideBar.border#E86E3850
sideBar.foreground#FF793E
sideBarSectionHeader.background#0D0F11
sideBarSectionHeader.border#0D0F1160
sideBarSectionHeader.foreground#FF793E
sideBarTitle.foreground#FFAA84
statusBar.background#121517
statusBar.border#0D0F1160
statusBar.debuggingBackground#F72405
statusBar.debuggingForeground#FFC29B
statusBar.foreground#E86E38
statusBar.noFolderBackground#0D0F11
statusBarItem.hoverBackground#E86E3820
statusBarItem.remoteBackground#E86E38
statusBarItem.remoteForeground#0D0F11
tab.activeBackground#E86E3850
tab.activeBorder#E86E38
tab.activeForeground#FFC29B
tab.activeModifiedBorder#E86E38
tab.border#0D0F11
tab.inactiveBackground#E86E3820
tab.inactiveForeground#FFAA84af
tab.unfocusedActiveBackground#E86E3840
tab.unfocusedActiveBorder#E86E38
tab.unfocusedActiveForeground#FFAA84
tab.unfocusedInactiveBackground#E86E3810
tab.unfocusedInactiveForeground#FFAA847f
terminal.ansiBlack#0D0F11
terminal.ansiBlue#FF793E
terminal.ansiBrightBlack#E86E38
terminal.ansiBrightBlue#FF793E
terminal.ansiBrightCyan#FFA27C
terminal.ansiBrightGreen#A91903
terminal.ansiBrightMagenta#F72405
terminal.ansiBrightRed#E32105
terminal.ansiBrightWhite#FFC29B
terminal.ansiBrightYellow#F72405
terminal.ansiCyan#FFA27C
terminal.ansiGreen#A91903
terminal.ansiMagenta#F72405
terminal.ansiRed#E32105
terminal.ansiWhite#FFC29B
terminal.ansiYellow#F72405
terminalCursor.background#0D0F11
terminalCursor.foreground#F72405
textLink.activeForeground#FFAA84
textLink.foreground#E86E38
titleBar.activeBackground#0D0F11
titleBar.activeForeground#FFAA84
titleBar.border#0D0F1160
titleBar.inactiveBackground#0D0F11
titleBar.inactiveForeground#E86E38
tree.indentGuidesStroke#171B1D
widget.shadow#0D0F1130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string constant.other.placeholder, invalid.deprecated, storage.type, storage.modifier	#ff8a58	—
variable, keyword	#F72405	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#E86E38	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#A91903	—
constant.other.php	#F72405	—
constant.other.color	#FFC29B	—
invalid, invalid.illegal	#E32105	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#cf8a62	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#F9763C	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#FFAA84	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#6D6F7C	—
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.tsx	#FF8A58	—
entity.name.tag.html, support.class.component.tsx	#FF8A58	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#F72405	—
storage.type.js, string.other.link.title.markdown, variable.other, entity.name.type.alias.tsx	#F72405	—
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, constant.language.null.tsx	#FF793E	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#FFA27C	—
support.other.variable, string.other.link, markup.table	#FFAA84	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#F72405	—
variable.parameter.function.language.special, variable.parameter	#E32105	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#A91903	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#F72405	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.primitive.tsx, entity.name.type.tsx	#ff8957	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E32105	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FF793E	italic
entity.other.attribute-name, support.function	#ff553b	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, keyword.control, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#ff553b	—
source.scss keyword.control	#F72405	—
markup.inserted	#A91903	—
markup.deleted	#E32105	—
markup.changed	#F72405	—
string.regexp	#FFA27C	—
constant.character.escape	#FFA27C	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#FFAA84	italic
support.type.property-name.json	#FFAA84	—
text.html.markdown, punctuation.definition.list_item.markdown	#FFAA84	—
text.html.markdown markup.inline.raw.markdown	#F72405	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#E86E3850	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#F9763C	bold
markup.underline	#FF793E	underline
markup.strike	—	—
markup.quote punctuation.definition.blockquote.markdown	#E86E3850	—
markup.quote	—	italic
string.other.link.description.title.markdown	#F72405	—
constant.other.reference.link.markdown	#F72405	—
markup.raw.block	#F72405	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#FFA27C	—
variable.language.fenced.markdown	#E86E38	—
meta.separator	#A7A8AF	bold
token.info-token	#E86E38	—
token.warn-token	#F72405	—
token.error-token	#FF293B	—
token.debug-token	#FFA27C	—

VS Code preview

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

The Best Themes for programmers — Shades of Purple 2

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#28284E
activityBar.border#292952
activityBar.dropBackground#222145
activityBar.foreground#FFFFFF
activityBarBadge.background#FAD000
activityBarBadge.foreground#1E1E3F
badge.background#FAD000
badge.foreground#1E1E3F
breadcrumb.activeSelectionForeground#FFFFFF
breadcrumb.focusForeground#FAD000
breadcrumb.foreground#A599E9
breadcrumbPicker.background#1E1E3F
button.background#FAD000
button.foreground#222244
button.hoverBackground#A599E9
contrastActiveBorder#FFFFFF00
contrastBorder#FFFFFF00
debugExceptionWidget.background#1E1E3F
debugExceptionWidget.border#A599E9
debugToolBar.background#1E1E3F
descriptionForeground#A599E9
diffEditor.insertedTextBackground#00FF000E
diffEditor.insertedTextBorder#00FF009A
diffEditor.removedTextBackground#FF000D1A
diffEditor.removedTextBorder#FF000D81
dropdown.background#1E1E3F
dropdown.border#1E1E3F
dropdown.foreground#FFFFFF
editor.background#2D2B55
editor.findMatchBackground#FF7200
editor.findMatchHighlightBackground#FFFF0336
editor.findRangeHighlightBackground#FFFF0336
editor.foreground#FFFFFF
editor.hoverHighlightBackground#1E1E3F80
editor.inactiveSelectionBackground#7580B8C0
editor.lineHighlightBackground#1F1F41
editor.lineHighlightBorder#1F1F41
editor.rangeHighlightBackground#1F1F41
editor.selectionBackground#B362FF88
editor.selectionHighlightBackground#7E46DF46
editor.wordHighlightBackground#FFFFFF0D
editor.wordHighlightStrongBackground#FFFFFF0D
editorBracketMatch.background#AD70FC46
editorBracketMatch.border#AD70FC46
editorCodeLens.foreground#A599E9
editorCursor.foreground#FAD000
editorError.foreground#EC3A37F5
editorGroup.border#222244
editorGroup.dropBackground#222244D0
editorGroupHeader.noTabsBackground#2D2B55
editorGroupHeader.tabsBackground#2D2B55
editorGroupHeader.tabsBorder#1F1F41
editorGutter.addedBackground#35AD68
editorGutter.background#28284E
editorGutter.deletedBackground#EC3A37F5
editorGutter.modifiedBackground#AD70FC46
editorHoverWidget.background#1F1F41
editorHoverWidget.border#1F1F41
editorIndentGuide.activeBackground#A599E942
editorIndentGuide.background#A599E90F
editorLineNumber.foreground#A599E9
editorLink.activeForeground#A599E9
editorMarkerNavigation.background#3B536433
editorMarkerNavigationError.background#EC3A37F5
editorMarkerNavigationWarning.background#FAD000
editorOverviewRuler.border#A599E91C
editorOverviewRuler.commonContentForeground#FFC60055
editorOverviewRuler.currentContentForeground#EE3A4355
editorOverviewRuler.incomingContentForeground#3AD90055
editorRuler.foreground#A599E91C
editorSuggestWidget.background#1F1F41
editorSuggestWidget.border#1F1F41
editorSuggestWidget.foreground#A599E9
editorSuggestWidget.highlightForeground#FAD000
editorSuggestWidget.selectedBackground#2D2B55
editorWarning.border#FFFFFF00
editorWarning.foreground#FAD000
editorWhitespace.foreground#FFFFFF1A
editorWidget.background#222244
editorWidget.border#1F1F41
errorForeground#EC3A37F5
extensionButton.prominentBackground#5D37F0
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#FF9D00
focusBorder#1E1E3F
foreground#A599E9
gitDecoration.conflictingResourceForeground#FF7200
gitDecoration.deletedResourceForeground#EC3A37F5
gitDecoration.ignoredResourceForeground#a599e981
gitDecoration.modifiedResourceForeground#FAD000
gitDecoration.untrackedResourceForeground#3AD900
input.background#2D2B55
input.border#1E1E3F
input.foreground#FAD000
input.placeholderForeground#A599E9
inputOption.activeBorder#A599E9
inputValidation.errorBackground#2D2B55
inputValidation.errorBorder#FAD000
inputValidation.infoBackground#2D2B55
inputValidation.infoBorder#2D2B55
inputValidation.warningBackground#2D2B55
inputValidation.warningBorder#FAD000
list.activeSelectionBackground#1E1E3F
list.activeSelectionForeground#FFFFFF
list.dropBackground#1E1E3F
list.focusBackground#1E1E3F
list.focusForeground#FFFFFF
list.highlightForeground#FAD000
list.hoverBackground#2D2B55
list.hoverForeground#CEC5FF
list.inactiveSelectionBackground#2D2B55
list.inactiveSelectionForeground#AAA
merge.border#FFFFFF00
merge.commonContentBackground#FFFFFF00
merge.commonHeaderBackground#FFFFFF00
merge.currentContentBackground#FFFFFF00
merge.currentHeaderBackground#FFFFFF00
merge.incomingContentBackground#FFFFFF00
merge.incomingHeaderBackground#FFFFFF00
notificationCenter.border#1E1E3F
notificationCenterHeader.background#6943FF
notificationCenterHeader.foreground#FFFFFF
notificationLink.foreground#FFFFFF
notifications.background#1E1E3F
notifications.border#2D2B55
notifications.foreground#CEC5FF
notificationToast.border#1E1E3F
panel.background#1E1E3F
panel.border#FAD000
panelTitle.activeBorder#FAD000
panelTitle.activeForeground#FAD000
panelTitle.inactiveForeground#A599E9
peekView.border#FAD000
peekViewEditor.background#1E1E3F
peekViewEditor.matchHighlightBackground#19354900
peekViewEditorGutter.background#191935
peekViewResult.background#1E1E3F
peekViewResult.fileForeground#AAA
peekViewResult.lineForeground#FFFFFF
peekViewResult.matchHighlightBackground#2D2B55
peekViewResult.selectionBackground#2D2B55
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#1F1F41
peekViewTitleDescription.foreground#AAA
peekViewTitleLabel.foreground#FAD000
pickerGroup.border#1E1E3F
pickerGroup.foreground#A599E9
progressBar.background#FAD000
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#1E1E3FDA
scrollbarSlider.background#1E1E3F9D
scrollbarSlider.hoverBackground#1E1E3FD7
selection.background#B362FF
settings.checkboxBackground#1E1E3F
settings.checkboxBorder#1E1E3F
settings.checkboxForeground#A599E9
settings.dropdownBackground#1E1E3F
settings.dropdownBorder#1E1E3F
settings.dropdownForeground#A599E9
settings.headerForeground#FFFFFF
settings.inactiveSelectedItemBorder#FAD000
settings.modifiedItemForeground#3AD900
settings.numberInputBackground#1E1E3F
settings.numberInputBorder#1E1E3F
settings.numberInputForeground#A599E9
settings.textInputBackground#1E1E3F
settings.textInputBorder#1E1E3F
settings.textInputForeground#A599E9
sideBar.background#222244
sideBar.border#25254B
sideBar.foreground#A599E9
sideBarSectionHeader.background#1E1E3F
sideBarSectionHeader.foreground#A599E9
sideBarTitle.foreground#A599E9
statusBar.background#1E1E3F
statusBar.border#1E1E3F
statusBar.debuggingBackground#1E1E3F
statusBar.debuggingForeground#1E1E3F
statusBar.foreground#A599E9
statusBar.noFolderBackground#1E1E3F
statusBar.noFolderForeground#A599E9
statusBarItem.activeBackground#4D21FC
statusBarItem.hoverBackground#2D2B55
statusBarItem.prominentBackground#1E1E3F
statusBarItem.prominentHoverBackground#2D2B55
tab.activeBackground#222244
tab.activeBorder#FAD000
tab.activeForeground#FFFFFF
tab.border#1E1E3F
tab.inactiveBackground#2D2B55
tab.inactiveForeground#A599E9
tab.unfocusedActiveForeground#A599E9
tab.unfocusedInactiveForeground#A599E9
terminal.ansiBlack#000000
terminal.ansiBlue#6943FF
terminal.ansiBrightBlack#5C5C61
terminal.ansiBrightBlue#6943FF
terminal.ansiBrightCyan#80FCFF
terminal.ansiBrightGreen#3AD900
terminal.ansiBrightMagenta#FB94FF
terminal.ansiBrightRed#EC3A37F5
terminal.ansiBrightWhite#2D2B55
terminal.ansiBrightYellow#FAD000
terminal.ansiCyan#80FCFF
terminal.ansiGreen#3AD900
terminal.ansiMagenta#FF2C70
terminal.ansiRed#EC3A37F5
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FAD000
terminal.background#1E1E3F
terminal.foreground#FFFFFF
terminalCursor.background#FAD000
terminalCursor.foreground#FAD000
textBlockQuote.background#1E1E3F
textBlockQuote.border#6943FF
textCodeBlock.background#1E1E3F
textLink.activeForeground#B362FF
textLink.foreground#B362FF
textPreformat.foreground#FAD000
textSeparator.foreground#1E1E3F
titleBar.activeBackground#1E1E3F
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#1E1E3F
titleBar.inactiveForeground#A599E9
walkThrough.embeddedEditorBackground#1E1E3F
welcomePage.buttonBackground#1E1E3F
welcomePage.buttonHoverBackground#1E1E3F
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#B362FF	—
entity	#FAD000	—
constant	#FF628C	—
keyword, storage.type.class.js	#FF9D00	—
meta	#9EFFFF	—
invalid	#EC3A37F5	—
meta.brace	#E1EFFF	—
punctuation	#E1EFFF	—
punctuation.definition.parameters	#FFEE80	—
punctuation.definition.template-expression	#FFEE80	—
storage	#FAD000	—
storage.type.function.arrow	#FAD000	—
string, punctuation.definition.string	#A5FF90	—
string.template, punctuation.definition.string.template	#3AD900	—
support	#80FFBB	—
support.function	#FF9D00	—
support.variable.property.dom	#9EFFFF	—
variable	#E1EFFF	—
source.ini entity	#E1EFFF	—
source.ini keyword	#FAD000	—
source.ini punctuation.definition	#FFEE80	—
source.ini punctuation.separator	#FF9D00	—
source.css entity, source.stylus entity	#3AD900	—
entity.other.attribute-name.id.css	#FFB454	—
entity.name.tag	#9EFFFF	—
source.css support, source.stylus support	#A5FF90	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#FFEE80	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#FFEE80	—
source.css variable, source.stylus variable	#9EFFFF	—
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html	#9EFFFF	—
meta.toc-list.id.html	#A5FF90	—
text.html.basic entity.other	#FAD000	—
meta.tag.metadata.script.html entity.name.tag.html	#FAD000	—
punctuation.definition.string.begin, punctuation.definition.string.end	#92FC79	—
meta.tag.inline.any.html, meta.tag.other	#FF9D00	—
source.json support	#FAD000	—
source.json string, source.json punctuation.definition.string	#92FC79	—
source.js storage.type.function	#FB94FF	—
variable.language, entity.name.type.class.js	#FB94FF	—
entity.other.inherited-class	#FFEE80	—
storage.type.extends.js, storage.type.class.jsdoc	#FF9D00	—
punctuation.definition.block.tag.jsdoc	#FF9D00	—
variable.other.jsdoc, entity.name.type.instance.jsdoc	#9EFFFF	—
variable.other.constant.js	#9EFFFF	—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js	#9EFFFF	—
meta.jsx.children.js	#FFFFFF	—
storage.type.js, storage.type.class.js, storage.modifier.js, keyword.control, keyword.operator	#FF9D00	—
punctuation.definition.bracket.curly	#494685	—
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx	#FF9D00	—
keyword.operator.assignment	#FF9D00	—
meta.jsx.children.tsx	#FFFFFF	—
meta.object-literal.key.js	#80FFBB	—
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite.js, variable.other.object.js	#9EFFFF	—
variable.other.property, variable.other.object.property	#FFEE80	—
JSXNested	#FFFFFF	—
variable.parameter	#9EFFFF	—
variable.parameter.function.language.special.self.python	#9EFFFF	—
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python	#FAD000	—
source.ts entity.name.type	#80FFBB	—
source.ts keyword	#FAD000	—
source.ts punctuation.definition.parameters	#E1EFFF	—
meta.arrow.ts punctuation.definition.parameters	#FFEE80	—
source.ts storage	#9EFFFF	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#FAD000	bold
meta.paragraph.markdown	#FFFFFF	—
markup.inline.raw.string.markdown	#A599E9	—
beginning.punctuation.definition.quote.markdown	#FAD000	—
markup.quote.markdown meta.paragraph.markdown	#A599E9	—
meta.separator.markdown	#FAD000	—
markup.bold.markdown	#A599E9	bold
markup.italic.markdown	#A599E9	—
beginning.punctuation.definition.list.markdown	#FAD000	—
string.other.link.title.markdown	#A5FF90	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#A5FF90	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#9EFFFF	—
fenced_code.block.language, markup.inline.raw.markdown	#9EFFFF	—
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown	#494685	—
text.jade entity.name	#9EFFFF	—
storage.type.function.pug	#FF9D00	—
variable.parameter.function.js	#9EFFFF	—
variable.control.import.include.pug	#92FC79	—
text.jade string.interpolated	#FFEE80	—
storage.type.cs	#9EFFFF	—
entity.name.variable.property.cs	#9EFFFF	—
storage.modifier.cs	#80FFBB	—
source.php entity, variable.other.class.php	#9EFFFF	—
keyword.other.phpdoc.php	#FF9D00	—
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property	#FAD000	—
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php	#9EFFFF	—
storage.modifier.php, keyword.other.namespace.php	#FF9D00	—
punctuation.definition.block.sequence.item.yaml	#FF9D00	—
storage.type.function.php, meta.function.parameters.php	#FB94FF	—
keyword.package.go, keyword.import.go	#FF9D00	—
entity.name.section.group-title.ini	#FF9D00	—
keyword.other.definition.ini	#FAD000	—
punctuation.definition.entity.ini	#FFFFFF	—
keyword.function.go	#FB94FF	—
variable.other.assignment.go	#9EFFFF	—
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go	#FAD000	—
support.type.property-name.json	#FAD000	—
entity.name.tag.yaml	#FAD000	—
string.unquoted.plain.out.yaml	#FFFFFF	—
italic, keyword.control, quote, storage, modifier, this, comment, support.type.property-name, entity.other.attribute-name, punctuation.definition.comment, text.html.basic entity.other, markup.quote, markup.italic, meta.tag.sgml.doctype, punctuation.binary, markup.changed, meta.diff.header, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, meta.delimiter.period, punctuation.accessor, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type, variable.other.object.property, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.section, meta.selector	—	italic