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 — Shades of Purple 2

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}