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 — Nord

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.activeBackground#3b4252
activityBar.activeBorder#88c0d0
activityBar.background#2e3440
activityBar.dropBackground#3b4252
activityBar.foreground#d8dee9
activityBarBadge.background#88c0d0
activityBarBadge.foreground#2e3440
badge.background#88c0d0
badge.foreground#2e3440
button.background#88c0d0ee
button.foreground#2e3440
button.hoverBackground#88c0d0
button.secondaryBackground#434c5e
button.secondaryForeground#d8dee9
button.secondaryHoverBackground#4c566a
charts.blue#81a1c1
charts.foreground#d8dee9
charts.green#a3be8c
charts.lines#88c0d0
charts.orange#d08770
charts.purple#b48ead
charts.red#bf616a
charts.yellow#ebcb8b
debugConsole.errorForeground#bf616a
debugConsole.infoForeground#88c0d0
debugConsole.sourceForeground#616e88
debugConsole.warningForeground#ebcb8b
debugConsoleInputIcon.foreground#81a1c1
debugExceptionWidget.background#4c566a
debugExceptionWidget.border#2e3440
debugToolBar.background#3b4252
descriptionForeground#d8dee9e6
diffEditor.insertedTextBackground#81a1c133
diffEditor.removedTextBackground#bf616a4d
dropdown.background#3b4252
dropdown.border#3b4252
dropdown.foreground#d8dee9
editor.background#2e3440
editor.findMatchBackground#88c0d066
editor.findMatchHighlightBackground#88c0d033
editor.findRangeHighlightBackground#88c0d033
editor.focusedStackFrameHighlightBackground#5e81ac
editor.foreground#d8dee9
editor.hoverHighlightBackground#3b4252
editor.inactiveSelectionBackground#434c5ecc
editor.inlineValuesBackground#4c566a
editor.inlineValuesForeground#eceff4
editor.lineHighlightBackground#3b4252
editor.lineHighlightBorder#3b4252
editor.rangeHighlightBackground#434c5e52
editor.selectionBackground#434c5ecc
editor.selectionHighlightBackground#434c5ecc
editor.stackFrameHighlightBackground#5e81ac
editor.wordHighlightBackground#81a1c166
editor.wordHighlightStrongBackground#81a1c199
editorActiveLineNumber.foreground#d8dee9cc
editorBracketHighlight.foreground1#8fbcbb
editorBracketHighlight.foreground2#88c0d0
editorBracketHighlight.foreground3#81a1c1
editorBracketHighlight.foreground4#5e81ac
editorBracketHighlight.foreground5#8fbcbb
editorBracketHighlight.foreground6#88c0d0
editorBracketHighlight.unexpectedBracket.foreground#bf616a
editorBracketMatch.background#2e344000
editorBracketMatch.border#88c0d0
editorCodeLens.foreground#4c566a
editorCursor.foreground#d8dee9
editorError.border#bf616a00
editorError.foreground#bf616a
editorGroup.background#2e3440
editorGroup.border#3b425201
editorGroup.dropBackground#3b425299
editorGroupHeader.border#3b425200
editorGroupHeader.noTabsBackground#2e3440
editorGroupHeader.tabsBackground#2e3440
editorGroupHeader.tabsBorder#3b425200
editorGutter.addedBackground#a3be8c
editorGutter.background#2e3440
editorGutter.deletedBackground#bf616a
editorGutter.modifiedBackground#ebcb8b
editorHint.border#ebcb8b00
editorHint.foreground#ebcb8b
editorHoverWidget.background#3b4252
editorHoverWidget.border#3b4252
editorIndentGuide.activeBackground#4c566a
editorIndentGuide.background#434c5eb3
editorInlayHint.background#434c5e
editorInlayHint.foreground#d8dee9
editorLineNumber.activeForeground#d8dee9
editorLineNumber.foreground#4c566a
editorLink.activeForeground#88c0d0
editorMarkerNavigation.background#5e81acc0
editorMarkerNavigationError.background#bf616ac0
editorMarkerNavigationWarning.background#ebcb8bc0
editorOverviewRuler.addedForeground#a3be8c
editorOverviewRuler.border#3b4252
editorOverviewRuler.currentContentForeground#3b4252
editorOverviewRuler.deletedForeground#bf616a
editorOverviewRuler.errorForeground#bf616a
editorOverviewRuler.findMatchForeground#88c0d066
editorOverviewRuler.incomingContentForeground#3b4252
editorOverviewRuler.infoForeground#81a1c1
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#88c0d066
editorOverviewRuler.selectionHighlightForeground#88c0d066
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#88c0d066
editorOverviewRuler.wordHighlightStrongForeground#88c0d066
editorRuler.foreground#434c5e
editorSuggestWidget.background#2e3440
editorSuggestWidget.border#3b4252
editorSuggestWidget.focusHighlightForeground#88c0d0
editorSuggestWidget.foreground#d8dee9
editorSuggestWidget.highlightForeground#88c0d0
editorSuggestWidget.selectedBackground#434c5e
editorSuggestWidget.selectedForeground#d8dee9
editorWarning.border#ebcb8b00
editorWarning.foreground#ebcb8b
editorWhitespace.foreground#4c566ab3
editorWidget.background#2e3440
editorWidget.border#3b4252
errorForeground#bf616a
extensionButton.prominentBackground#434c5e
extensionButton.prominentForeground#d8dee9
extensionButton.prominentHoverBackground#4c566a
focusBorder#3b4252
foreground#d8dee9
gitDecoration.conflictingResourceForeground#5e81ac
gitDecoration.deletedResourceForeground#bf616a
gitDecoration.ignoredResourceForeground#d8dee966
gitDecoration.modifiedResourceForeground#ebcb8b
gitDecoration.stageDeletedResourceForeground#bf616a
gitDecoration.stageModifiedResourceForeground#ebcb8b
gitDecoration.submoduleResourceForeground#8fbcbb
gitDecoration.untrackedResourceForeground#a3be8c
input.background#3b4252
input.border#3b4252
input.foreground#d8dee9
input.placeholderForeground#d8dee999
inputOption.activeBackground#5e81ac
inputOption.activeBorder#5e81ac
inputOption.activeForeground#eceff4
inputValidation.errorBackground#bf616a
inputValidation.errorBorder#bf616a
inputValidation.infoBackground#81a1c1
inputValidation.infoBorder#81a1c1
inputValidation.warningBackground#d08770
inputValidation.warningBorder#d08770
keybindingLabel.background#4c566a
keybindingLabel.border#4c566a
keybindingLabel.bottomBorder#4c566a
keybindingLabel.foreground#d8dee9
list.activeSelectionBackground#88c0d0
list.activeSelectionForeground#2e3440
list.dropBackground#88c0d099
list.errorForeground#bf616a
list.focusBackground#88c0d099
list.focusForeground#d8dee9
list.focusHighlightForeground#eceff4
list.highlightForeground#88c0d0
list.hoverBackground#3b4252
list.hoverForeground#eceff4
list.inactiveFocusBackground#434c5ecc
list.inactiveSelectionBackground#434c5e
list.inactiveSelectionForeground#d8dee9
list.warningForeground#ebcb8b
merge.border#3b425200
merge.currentContentBackground#81a1c14d
merge.currentHeaderBackground#81a1c166
merge.incomingContentBackground#8fbcbb4d
merge.incomingHeaderBackground#8fbcbb66
minimap.background#2e3440
minimap.errorHighlight#bf616acc
minimap.findMatchHighlight#88c0d0
minimap.selectionHighlight#88c0d0cc
minimap.warningHighlight#ebcb8bcc
minimapGutter.addedBackground#a3be8c
minimapGutter.deletedBackground#bf616a
minimapGutter.modifiedBackground#ebcb8b
minimapSlider.activeBackground#434c5eaa
minimapSlider.background#434c5e99
minimapSlider.hoverBackground#434c5eaa
notification.background#3b4252
notification.buttonBackground#434c5e
notification.buttonForeground#d8dee9
notification.buttonHoverBackground#4c566a
notification.errorBackground#bf616a
notification.errorForeground#2e3440
notification.foreground#d8dee9
notification.infoBackground#88c0d0
notification.infoForeground#2e3440
notification.warningBackground#ebcb8b
notification.warningForeground#2e3440
notificationCenter.border#3b425200
notificationCenterHeader.background#2e3440
notificationCenterHeader.foreground#88c0d0
notificationLink.foreground#88c0d0
notifications.background#3b4252
notifications.border#2e3440
notifications.foreground#d8dee9
notificationToast.border#3b425200
panel.background#2e3440
panel.border#3b4252
panelTitle.activeBorder#88c0d000
panelTitle.activeForeground#88c0d0
panelTitle.inactiveForeground#d8dee9
peekView.border#4c566a
peekViewEditor.background#2e3440
peekViewEditor.matchHighlightBackground#88c0d04d
peekViewEditorGutter.background#2e3440
peekViewResult.background#2e3440
peekViewResult.fileForeground#88c0d0
peekViewResult.lineForeground#d8dee966
peekViewResult.matchHighlightBackground#88c0d0cc
peekViewResult.selectionBackground#434c5e
peekViewResult.selectionForeground#d8dee9
peekViewTitle.background#3b4252
peekViewTitleDescription.foreground#d8dee9
peekViewTitleLabel.foreground#88c0d0
pickerGroup.border#3b4252
pickerGroup.foreground#88c0d0
progressBar.background#88c0d0
quickInputList.focusBackground#88c0d0
quickInputList.focusForeground#2e3440
sash.hoverBorder#88c0d0
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#434c5eaa
scrollbarSlider.background#434c5e99
scrollbarSlider.hoverBackground#434c5eaa
selection.background#88c0d099
sideBar.background#2e3440
sideBar.border#3b4252
sideBar.foreground#d8dee9
sideBarSectionHeader.background#3b4252
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#3b4252
statusBar.border#3b425200
statusBar.debuggingBackground#5e81ac
statusBar.debuggingForeground#d8dee9
statusBar.foreground#d8dee9
statusBar.noFolderBackground#3b4252
statusBar.noFolderForeground#d8dee9
statusBarItem.activeBackground#4c566a
statusBarItem.errorBackground#3b4252
statusBarItem.errorForeground#bf616a
statusBarItem.hoverBackground#434c5e
statusBarItem.prominentBackground#3b4252
statusBarItem.prominentHoverBackground#434c5e
statusBarItem.warningBackground#ebcb8b
statusBarItem.warningForeground#2e3440
tab.activeBackground#3b4252
tab.activeBorder#88c0d000
tab.activeBorderTop#88c0d000
tab.activeForeground#d8dee9
tab.border#3b425200
tab.hoverBackground#3b4252cc
tab.hoverBorder#88c0d000
tab.inactiveBackground#2e3440
tab.inactiveForeground#d8dee966
tab.lastPinnedBorder#4c566a
tab.unfocusedActiveBorder#88c0d000
tab.unfocusedActiveBorderTop#88c0d000
tab.unfocusedActiveForeground#d8dee999
tab.unfocusedHoverBackground#3b4252b3
tab.unfocusedHoverBorder#88c0d000
tab.unfocusedInactiveForeground#d8dee966
terminal.ansiBlack#3b4252
terminal.ansiBlue#81a1c1
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#81a1c1
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
terminal.background#2e3440
terminal.foreground#d8dee9
terminal.tab.activeBorder#88c0d0
textBlockQuote.background#3b4252
textBlockQuote.border#81a1c1
textCodeBlock.background#4c566a
textLink.activeForeground#88c0d0
textLink.foreground#88c0d0
textPreformat.foreground#8fbcbb
textSeparator.foreground#eceff4
titleBar.activeBackground#2e3440
titleBar.activeForeground#d8dee9
titleBar.border#2e344000
titleBar.inactiveBackground#2e3440
titleBar.inactiveForeground#d8dee966
tree.indentGuidesStroke#616e88
walkThrough.embeddedEditorBackground#2e3440
welcomePage.buttonBackground#434c5e
welcomePage.buttonHoverBackground#4c566a
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d8dee9ff	—
emphasis	—	italic
strong	—	bold
comment	#616E88	—
constant.character	#EBCB8B	—
constant.character.escape	#EBCB8B	—
constant.language	#81A1C1	—
constant.numeric	#B48EAD	—
constant.regexp	#EBCB8B	—
entity.name.class, entity.name.type.class	#8FBCBB	—
entity.name.function	#88C0D0	—
entity.name.tag	#81A1C1	—
entity.other.attribute-name	#8FBCBB	—
entity.other.inherited-class	#8FBCBB	bold
invalid.deprecated	#D8DEE9	—
invalid.illegal	#D8DEE9	—
keyword	#81A1C1	—
keyword.operator	#81A1C1	—
keyword.other.new	#81A1C1	—
markup.bold	—	bold
markup.changed	#EBCB8B	—
markup.deleted	#BF616A	—
markup.inserted	#A3BE8C	—
meta.preprocessor	#5E81AC	—
punctuation	#ECEFF4	—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters	#ECEFF4	—
punctuation.definition.tag	#81A1C1	—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment	#616E88	—
punctuation.section	#ECEFF4	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#81A1C1	—
punctuation.terminator	#81A1C1	—
punctuation.definition.variable	#81A1C1	—
storage	#81A1C1	—
string	#A3BE8C	—
string.regexp	#EBCB8B	—
support.class	#8FBCBB	—
support.constant	#81A1C1	—
support.function	#88C0D0	—
support.function.construct	#81A1C1	—
support.type	#8FBCBB	—
support.type.exception	#8FBCBB	—
token.debug-token	#b48ead	—
token.error-token	#bf616a	—
token.info-token	#88c0d0	—
token.warn-token	#ebcb8b	—
variable.other	#D8DEE9	—
variable.language	#81A1C1	—
variable.parameter	#D8DEE9	—
punctuation.separator.pointer-access.c	#81A1C1	—
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include	#8FBCBB	—
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive	#5E81AC	bold
source.css constant.other.color.rgb-value	#B48EAD	—
source.css meta.property-value	#88C0D0	—
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword	#D08770	—
source.css punctuation.definition.keyword	#81A1C1	—
source.css support.type.property-name	#D8DEE9	—
source.diff meta.diff.range.context	#8FBCBB	—
source.diff meta.diff.header.from-file	#8FBCBB	—
source.diff punctuation.definition.from-file	#8FBCBB	—
source.diff punctuation.definition.range	#8FBCBB	—
source.diff punctuation.definition.separator	#81A1C1	—
entity.name.type.module.elixir	#8FBCBB	—
variable.other.readwrite.module.elixir	#D8DEE9	bold
constant.other.symbol.elixir	#D8DEE9	bold
variable.other.constant.elixir	#8FBCBB	—
source.go constant.other.placeholder.go	#EBCB8B	—
source.java comment.block.documentation.javadoc punctuation.definition.entity.html	#81A1C1	—
source.java constant.other	#D8DEE9	—
source.java keyword.other.documentation	#8FBCBB	—
source.java keyword.other.documentation.author.javadoc	#8FBCBB	—
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom	#8FBCBB	—
source.java keyword.other.documentation.see.javadoc	#8FBCBB	—
source.java meta.method-call meta.method	#88C0D0	—
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc	#8FBCBB	—
source.java meta.tag.template.value.javadoc	#88C0D0	—
source.java punctuation.definition.keyword.javadoc	#8FBCBB	—
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc	#616E88	—
source.java storage.modifier.import	#8FBCBB	—
source.java storage.modifier.package	#8FBCBB	—
source.java storage.type	#8FBCBB	—
source.java storage.type.annotation	#D08770	—
source.java storage.type.generic	#8FBCBB	—
source.java storage.type.primitive	#81A1C1	—
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function	#D08770	—
source.js meta.object-literal.key	#88C0D0	—
source.js storage.type.class.jsdoc	#8FBCBB	—
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression	#81A1C1	—
source.js string.quoted.template meta.method-call.with-arguments	#ECEFF4	—
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object	#D8DEE9	—
source.js support.type.primitive	#81A1C1	—
source.js variable.other.object	#D8DEE9	—
source.js variable.other.readwrite.alias	#8FBCBB	—
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round	#ECEFF4	—
text.html.basic constant.character.entity.html	#EBCB8B	—
text.html.basic constant.other.inline-data	#D08770	italic
text.html.basic meta.tag.sgml.doctype	#5E81AC	—
text.html.basic punctuation.definition.entity	#81A1C1	—
source.properties entity.name.section.group-title.ini	#88C0D0	—
source.properties punctuation.separator.key-value.ini	#81A1C1	—
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition	#8FBCBB	—
markup.heading	#88C0D0	—
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw	#8FBCBB	—
text.html.markdown markup.italic	—	italic
text.html.markdown markup.underline.link	—	underline
text.html.markdown beginning.punctuation.definition.list	#81A1C1	—
text.html.markdown beginning.punctuation.definition.quote	#8FBCBB	—
text.html.markdown markup.quote	#616E88	—
text.html.markdown constant.character.math.tex	#81A1C1	—
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end	#5E81AC	—
text.html.markdown punctuation.definition.function.math.tex	#88C0D0	—
text.html.markdown punctuation.math.operator.latex	#81A1C1	—
text.html.markdown punctuation.definition.heading	#81A1C1	—
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string	#81A1C1	—
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title	#88C0D0	—
source.perl punctuation.definition.variable	#D8DEE9	—
source.php meta.function-call, source.php meta.function-call.object	#88C0D0	—
source.python entity.name.function.decorator, source.python meta.function.decorator support.type	#D08770	—
source.python meta.function-call.generic	#88C0D0	—
source.python support.type	#88C0D0	—
source.python variable.parameter.function.language	#D8DEE9	—
source.python meta.function.parameters variable.parameter.function.language.special.self	#81A1C1	—
source.rust entity.name.type	#8FBCBB	—
source.rust meta.macro entity.name.function	#88C0D0	bold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator	#5E81AC	—
source.rust entity.name.type.trait	—	bold
source.rust punctuation.definition.interpolation	#EBCB8B	—
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly	#81A1C1	—
source.css.scss variable.interpolation	#D8DEE9	italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function	#D08770	—
source.ts meta.object-literal.key, source.tsx meta.object-literal.key	#D8DEE9	—
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function	#88C0D0	—
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class	#8FBCBB	—
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json	#8FBCBB	—
source.ts support.variable, source.tsx support.variable	#D8DEE9	—
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round	#ECEFF4	—
text.xml entity.name.tag.namespace	#8FBCBB	—
text.xml keyword.other.doctype	#5E81AC	—
text.xml meta.tag.preprocessor entity.name.tag	#5E81AC	—
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string	#D08770	italic
source.yaml entity.name.tag	#8FBCBB	—

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