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 — Best Themes - Slack aubergine

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#261C25
activityBar.dropBackground#958793
activityBar.foreground#958793
activityBarBadge.background#F44C5E
activityBarBadge.foreground#F6F6F6
badge.background#F44C5E
breadcrumb.focusForeground#F44C5E
breadcrumb.foreground#261C25
button.background#F44C5E
button.foreground#FFF
button.hoverBackground#e4505f
debugExceptionWidget.background#F6B555
debugExceptionWidget.border#261C25
debugToolBar.background#F44C5E
dropdown.background#4F384A
dropdown.border#EEEEEE
dropdown.foreground#EEEEEE
dropdown.listBackground#FFF
editor.background#FFF
editor.findMatchBackground#AED4FB
editor.foreground#000
editor.lineHighlightBackground#F3F3F3
editor.selectionBackground#AED4FB
editor.wordHighlightBackground#AED4FB
editor.wordHighlightStrongBackground#AED4FB
editorActiveLineNumber.foreground#F44C5E
editorGroup.emptyBackground#4F384A
editorGroup.focusedEmptyBorder#4F384A
editorGroupHeader.tabsBackground#F9F9F9
editorHint.border#F9F9F9
editorHint.foreground#F9F9F9
editorIndentGuide.activeBackground#dbdbdb
editorIndentGuide.background#F3F3F3
editorLineNumber.foreground#b9b9b9
editorMarkerNavigation.background#F9F9F9
editorMarkerNavigationError.background#F44C5E
editorMarkerNavigationInfo.background#6182b8
editorMarkerNavigationWarning.background#F6B555
editorPane.background#4F384A
editorSuggestWidget.foreground#4F384A
editorSuggestWidget.highlightForeground#4F384A
editorSuggestWidget.selectedBackground#b9b9b9
editorWidget.background#F9F9F9
editorWidget.border#dbdbdb
extensionButton.prominentBackground#F44C5E
extensionButton.prominentForeground#F6F6F6
extensionButton.prominentHoverBackground#442C3F
focusBorder#3E313C
foreground#36373B
gitDecoration.addedResourceForeground#ECB22E
gitDecoration.conflictingResourceForeground#FFF
gitDecoration.deletedResourceForeground#FFF
gitDecoration.ignoredResourceForeground#877583
gitDecoration.modifiedResourceForeground#ECB22E
gitDecoration.untrackedResourceForeground#ECB22E
input.background#FFF
input.border#3E313C
input.foreground#000
input.placeholderForeground#a0a0a0
inputOption.activeBorder#3E313C
inputValidation.errorBackground#F44C5E
inputValidation.errorForeground#FFF
inputValidation.infoBackground#6182b8
inputValidation.infoForeground#FFF
inputValidation.warningBackground#F6B555
inputValidation.warningForeground#000
list.activeSelectionBackground#3E9689
list.activeSelectionForeground#fff
list.focusBackground#3E9689
list.focusForeground#fff
list.highlightForeground#fff
list.hoverBackground#3E313C
list.hoverForeground#fff
list.inactiveFocusBackground#41353E
list.inactiveSelectionBackground#3E9689
list.inactiveSelectionForeground#fff
list.invalidItemForeground#fff
menu.background#F9FAFA
menu.foreground#3E313C
menu.separatorBackground#3E313C
notificationCenter.border#3E313C
notificationCenterHeader.foreground#FFF
notificationLink.foreground#FFF
notifications.background#3E313C
notifications.border#3E313C
notifications.foreground#FFF
notificationToast.border#3E313C
panel.border#4F384A
panelTitle.activeForeground#261C25
panelTitle.inactiveForeground#958793
peekView.border#4F384A
peekViewEditor.background#F3F3F3
peekViewEditor.matchHighlightBackground#80cbc440
peekViewEditor.matchHighlightBorder#F44C5E
peekViewEditorGutter.background#F3F3F3
peekViewResult.background#F9F9F9
peekViewResult.lineForeground#261C25
peekViewTitleDescription.foreground#685C66
peekViewTitleLabel.foreground#2D3E4C
progressBar.background#F44C5E
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#3e313c7e
scrollbarSlider.background#3e313c7e
scrollbarSlider.hoverBackground#3e313c7e
settings.dropdownBackground#FFF
settings.dropdownBorder#261C25
settings.dropdownForeground#261C25
settings.headerForeground#261C25
sideBar.background#4F384A
sideBar.foreground#c9b9c5
sideBarSectionHeader.background#3E313C
sideBarSectionHeader.foreground#FFF
sideBarTitle.foreground#FFF
statusBar.background#3E9689
statusBar.debuggingBackground#F44C5E
statusBar.foreground#FFF
statusBar.noFolderBackground#F6B555
symbolIcon.arrayForeground#c9b9c5
symbolIcon.booleanForeground#c9b9c5
symbolIcon.classForeground#c9b9c5
symbolIcon.colorForeground#c9b9c5
symbolIcon.constantForeground#c9b9c5
symbolIcon.constructorForeground#c9b9c5
symbolIcon.enumeratorForeground#c9b9c5
symbolIcon.enumeratorMemberForeground#c9b9c5
symbolIcon.eventForeground#c9b9c5
symbolIcon.fieldForeground#c9b9c5
symbolIcon.fileForeground#c9b9c5
symbolIcon.folderForeground#c9b9c5
symbolIcon.functionForeground#c9b9c5
symbolIcon.interfaceForeground#c9b9c5
symbolIcon.keyForeground#c9b9c5
symbolIcon.keywordForeground#c9b9c5
symbolIcon.methodForeground#c9b9c5
symbolIcon.moduleForeground#c9b9c5
symbolIcon.namespaceForeground#c9b9c5
symbolIcon.nullForeground#c9b9c5
symbolIcon.numberForeground#c9b9c5
symbolIcon.objectForeground#c9b9c5
symbolIcon.operatorForeground#c9b9c5
symbolIcon.packageForeground#c9b9c5
symbolIcon.propertyForeground#c9b9c5
symbolIcon.referenceForeground#c9b9c5
symbolIcon.snippetForeground#c9b9c5
symbolIcon.stringForeground#c9b9c5
symbolIcon.structForeground#c9b9c5
symbolIcon.textForeground#c9b9c5
symbolIcon.typeParameterForeground#c9b9c5
symbolIcon.unitForeground#c9b9c5
symbolIcon.variableForeground#c9b9c5
tab.activeBackground#FFF
tab.activeForeground#000
tab.border#F3F3F3
tab.inactiveBackground#F3F3F3
tab.inactiveForeground#686868
terminal.ansiBlack#000000
terminal.ansiBlue#6182b8
terminal.ansiBrightBlack#90a4ae
terminal.ansiBrightBlue#6182b8
terminal.ansiBrightCyan#39adb5
terminal.ansiBrightGreen#91b859
terminal.ansiBrightMagenta#7c4dff
terminal.ansiBrightRed#e53935
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb62c
terminal.ansiCyan#39adb5
terminal.ansiGreen#91b859
terminal.ansiMagenta#7c4dff
terminal.ansiRed#e53935
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffb62c
terminal.border#4F384A
terminal.foreground#261C25
textPreformat.foreground#261C25
titleBar.activeBackground#4F384A
titleBar.activeForeground#FFF
titleBar.border#4F384A
titleBar.inactiveBackground#261C25
titleBar.inactiveForeground#685C66
welcomePage.buttonBackground#F3F3F3
welcomePage.buttonHoverBackground#ECECEC
widget.shadow#3e313c94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#002339	—
meta.paragraph.markdown, string.other.link.description.title.markdown	#110000	—
entity.name.section.markdown, punctuation.definition.heading.markdown	#034c7c	—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown	#00AC8F	—
markup.quote.markdown	#003494	italic
markup.bold.markdown, punctuation.definition.bold.markdown	#4e76b5	bold
markup.italic.markdown, punctuation.definition.italic.markdown	#C792EA	italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown	#0460b1	italic
punctuation.definition.metadata.markdown	#00AC8F	—
markup.underline.link.image.markdown, markup.underline.link.markdown	#924205	—
comment	#357b42	italic
string	#a44185	—
constant.numeric	#174781	—
constant	#174781	—
language.method	#174781	—
constant.character, constant.other	#174781	—
variable	#2f86d2
variable.language.this	#000000
keyword	#7b30d0
storage	#da5221
storage.type	#0991b6
entity.name.class	#1172c7	—
entity.other.inherited-class	#b02767
entity.name.function	#7eb233
variable.parameter	#b1108e
entity.name.tag	#0444ac
text.html.basic	#0071ce
entity.name.type	#0444ac	—
entity.other.attribute-name	#df8618	italic
support.function	#1ab394
support.constant	#174781
support.type, support.class	#dc3eb7	—
support.other.variable	#224555	—
invalid	#207bb8	italic bold underline
invalid.deprecated	#207bb8	bold italic underline
source.json support	#6dbdfa	—
source.json string, source.json punctuation.definition.string	#00820f	—
markup.list	#207bb8	—
markup.heading punctuation.definition.heading, entity.name.section	#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown	#87429A	—
markup.quote	#87429A	—
markup.bold	#08134A	bold
markup.italic, punctuation.definition.italic	#174781	italic
meta.link	#87429A	—

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