Nachop theme

Name: Nachop theme
Author: Nachop Peralta

Publisher: Nachop PeraltaThemes in package: 8

Mix of the best VSCode themes

GitHub

Color themes

VS Code preview

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

Nachop theme — Nachop Dark Bordered

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.activeBorder#aeaaff
activityBar.background#191c21
activityBar.border#29292a
activityBar.foreground#dcdfeb
activityBar.inactiveForeground#6c739a99
activityBarBadge.background#5343e3
activityBarBadge.foreground#ffffff
badge.background#5343e333
badge.foreground#8267ff
button.background#5343e3
button.foreground#ffffff
button.hoverBackground#463ad9
button.secondaryBackground#6c739a33
button.secondaryForeground#dcdfeb
button.secondaryHoverBackground#6c739a80
debugConsoleInputIcon.foreground#5343e3
debugExceptionWidget.background#191c21
debugExceptionWidget.border#29292a
debugIcon.breakpointDisabledForeground#41a9ff80
debugIcon.breakpointForeground#41a9ff
debugToolBar.background#191c21
descriptionForeground#6c739a
diffEditor.border#29292a
diffEditor.diagonalFill#29292a
diffEditor.insertedTextBackground#89d59b1f
diffEditor.removedTextBackground#731d2b1f
dropdown.background#191c21
dropdown.border#6c739a45
dropdown.foreground#6c739a
editor.background#191c21
editor.findMatchBackground#6e57fb73
editor.findMatchBorder#6e57fb73
editor.findMatchHighlightBackground#5343e340
editor.findMatchHighlightBorder#5343e340
editor.findRangeHighlightBackground#5343e340
editor.foreground#dcdfeb
editor.inactiveSelectionBackground#5343e326
editor.lineHighlightBackground#202328
editor.rangeHighlightBackground#6e57fb33
editor.selectionBackground#5343e340
editor.selectionHighlightBackground#5343e326
editor.selectionHighlightBorder#5343e326
editor.wordHighlightBackground#5343e366
editor.wordHighlightBorder#5343e366
editor.wordHighlightStrongBackground#5343e366
editor.wordHighlightStrongBorder#8d70ff
editorBracketHighlight.foreground1#f3a84d
editorBracketHighlight.foreground2#e68aff
editorBracketHighlight.foreground3#49d9e8
editorBracketMatch.background#797d854d
editorBracketMatch.border#797d8580
editorCursor.foreground#ff0077
editorError.foreground#ff537b
editorGroup.border#29292a
editorGroupHeader.noTabsBackground#191c21
editorGroupHeader.tabsBackground#191c21
editorGroupHeader.tabsBorder#29292a
editorGutter.addedBackground#89d59bcc
editorGutter.deletedBackground#731d2bcc
editorGutter.modifiedBackground#83bcf1cc
editorHoverWidget.background#191c21
editorHoverWidget.border#29292a
editorIndentGuide.activeBackground1#aeaaff99
editorIndentGuide.background1#aeaaff1a
editorInfo.foreground#41a9ff
editorInlayHint.background#29292a
editorInlayHint.foreground#6c739a
editorLineNumber.activeForeground#797d85
editorLineNumber.foreground#797d8566
editorMarkerNavigation.background#191c21
editorOverviewRuler.addedForeground#89d59b
editorOverviewRuler.border#29292a
editorOverviewRuler.bracketMatchForeground#797d85b3
editorOverviewRuler.deletedForeground#731d2b
editorOverviewRuler.errorForeground#ff537b
editorOverviewRuler.findMatchForeground#6e57fb80
editorOverviewRuler.infoForeground#41a9ff
editorOverviewRuler.modifiedForeground#83bcf1
editorOverviewRuler.warningForeground#f1cb7a
editorOverviewRuler.wordHighlightForeground#83bcf166
editorOverviewRuler.wordHighlightStrongForeground#89d59b66
editorRuler.foreground#aeaaff1a
editorSuggestWidget.background#191c21
editorSuggestWidget.border#29292a
editorSuggestWidget.highlightForeground#5343e3
editorSuggestWidget.selectedBackground#5343e366
editorWarning.foreground#f1cb7a
editorWhitespace.foreground#797d8566
editorWidget.background#191c21
editorWidget.border#29292a
errorForeground#ff537b
extensionButton.prominentBackground#5343e3
extensionButton.prominentForeground#dcdfeb
extensionButton.prominentHoverBackground#463ad9
focusBorder#aeaaff
foreground#dcdfeb
gitDecoration.conflictingResourceForeground#ff537bb3
gitDecoration.deletedResourceForeground#731d2b
gitDecoration.ignoredResourceForeground#6c739a80
gitDecoration.modifiedResourceForeground#83bcf1
gitDecoration.submoduleResourceForeground#f5dd87b3
gitDecoration.untrackedResourceForeground#89d59b
icon.foreground#6c739a
input.background#191c21
input.border#6c739a40
input.foreground#dcdfeb
input.placeholderForeground#6c739a80
inputOption.activeBackground#5343e333
inputOption.activeBorder#5343e34d
inputOption.activeForeground#5343e3
inputValidation.errorBackground#191c21
inputValidation.errorBorder#ff537b
inputValidation.infoBackground#191c21
inputValidation.infoBorder#41a9ff
inputValidation.warningBackground#191c21
inputValidation.warningBorder#f1cb7a
keybindingLabel.background#6c739a1a
keybindingLabel.border#dcdfeb1a
keybindingLabel.bottomBorder#dcdfeb1a
keybindingLabel.foreground#dcdfeb
list.activeSelectionBackground#5343e366
list.activeSelectionForeground#dcdfeb
list.deemphasizedForeground#ff537b
list.errorForeground#ff6e92
list.filterMatchBackground#3f36d340
list.filterMatchBorder#5343e340
list.focusBackground#5343e366
list.focusForeground#dcdfeb
list.focusOutline#5343e366
list.highlightForeground#c59fff
list.hoverBackground#5343e31a
list.hoverForeground#dcdfeb
list.inactiveSelectionBackground#5343e34d
list.inactiveSelectionForeground#dcdfeb
list.invalidItemForeground#ff6e92
list.warningForeground#f1cb7a
listFilterWidget.background#191c21
listFilterWidget.noMatchesOutline#ff537b
listFilterWidget.outline#aeaaff
menu.background#191c21
menu.border#29292a
menu.foreground#c3c6d2
menu.selectionBackground#5343e366
menu.selectionBorder#5343e366
menu.selectionForeground#dcdfeb
menu.separatorBackground#40486c
menubar.selectionBackground#5343e366
menubar.selectionBorder#5343e366
menubar.selectionForeground#dcdfeb
minimap.background#191c21
minimap.errorHighlight#ff537b
minimap.findMatchHighlight#aeaaffcc
minimap.infoHighlight#41a9ff
minimap.selectionHighlight#aeaaffb3
minimap.selectionOccurrenceHighlight#aeaafff2
minimap.warningHighlight#f1cb7a
minimapGutter.addedBackground#89d59b
minimapGutter.deletedBackground#731d2b
minimapGutter.modifiedBackground#83bcf1
panel.background#191c21
panel.border#29292a
panelTitle.activeBorder#aeaaff
panelTitle.activeForeground#dcdfeb
panelTitle.inactiveForeground#6c739a
peekView.border#5343e366
peekViewEditor.background#191c21
peekViewEditor.matchHighlightBackground#5343e340
peekViewEditor.matchHighlightBorder#3f36d340
peekViewResult.background#191c21
peekViewResult.fileForeground#dcdfeb
peekViewResult.lineForeground#6c739a
peekViewResult.matchHighlightBackground#5343e340
peekViewResult.selectionBackground#5343e366
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#5343e366
peekViewTitleDescription.foreground#6c739a
peekViewTitleLabel.foreground#dcdfeb
pickerGroup.border#29292a
pickerGroup.foreground#5343e3
progressBar.background#5343e3
scrollbar.shadow#29292a66
scrollbarSlider.activeBackground#5343e399
scrollbarSlider.background#5343e34d
scrollbarSlider.hoverBackground#5343e366
selection.background#5343e340
settings.checkboxBackground#15181d
settings.checkboxBorder#aeaaff80
settings.checkboxForeground#dcdfebb3
settings.focusedRowBackground#5343e333
settings.headerForeground#dcdfeb
sideBar.background#191c21
sideBar.border#29292a
sideBar.foreground#6c739a
sideBarSectionHeader.background#191c21
sideBarSectionHeader.border#29292a
sideBarSectionHeader.foreground#9ba1cb
sideBarTitle.foreground#6c739a
statusBar.background#191c21
statusBar.border#29292a
statusBar.debuggingBackground#f1cb7a
statusBar.debuggingBorder#191c21
statusBar.debuggingForeground#40486c
statusBar.foreground#6c739a
statusBar.noFolderBackground#191c21
statusBarItem.activeBackground#6c739a33
statusBarItem.hoverBackground#6c739a33
statusBarItem.prominentBackground#29292a
statusBarItem.prominentHoverBackground#0000004f
statusBarItem.remoteBackground#5343e3
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#3f36d3
statusBarItem.remoteHoverForeground#ffffff
tab.activeBackground#191c21
tab.activeBorder#29292a
tab.activeBorderTop#aeaaff
tab.activeForeground#dcdfeb
tab.border#29292a
tab.hoverBackground#5343e31a
tab.inactiveBackground#191c21
tab.inactiveForeground#6c739a
tab.unfocusedActiveBorder#aeaaff80
tab.unfocusedActiveBorderTop#191c21
tab.unfocusedActiveForeground#6c739a
tab.unfocusedHoverBackground#5343e31a
tab.unfocusedInactiveForeground#6c739a
terminal.ansiBlack#3f4451
terminal.ansiBlue#4aa5f0
terminal.ansiBrightBlack#4f5666
terminal.ansiBrightBlue#4dc4ff
terminal.ansiBrightCyan#4cd1e0
terminal.ansiBrightGreen#a5e075
terminal.ansiBrightMagenta#de73ff
terminal.ansiBrightRed#ff616e
terminal.ansiBrightWhite#e6e6e6
terminal.ansiBrightYellow#ffec80
terminal.ansiCyan#42b3c2
terminal.ansiGreen#8cc265
terminal.ansiMagenta#c162de
terminal.ansiRed#e05561
terminal.ansiWhite#d7dae0
terminal.ansiYellow#f0c758
terminal.background#191c21
terminal.foreground#cdd0dc
textBlockQuote.background#191c21
textLink.activeForeground#c7c2ff
textLink.foreground#aeaaff
textPreformat.background#373b40
textPreformat.foreground#dcdfeb
titleBar.activeBackground#191c21
titleBar.activeForeground#dcdfeb
titleBar.border#29292a
titleBar.inactiveBackground#191c21
titleBar.inactiveForeground#6c739a
tree.indentGuidesStroke#aeaaff99
walkThrough.embeddedEditorBackground#191c21
welcomePage.progress.background#aeaaff
welcomePage.tileBackground#191c21
widget.shadow#0000004f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#546e7a	italic
variable, variable.parameter.function-call, variable.language, entity.name.variable.local.cs, meta.method.body	#ee6584	—
variable.other.constant, constant.other.color	#f5dd87	—
variable.member	#f29e74	—
invalid	#ff537b	—
keyword, keyword.control, keyword.other	#9e5bff	—
storage.type, storage.modifier	#9e5bff	—
keyword.operator, keyword.operator.assignment.go	#9e5bff	—
string, constant.other.symbol	#cae790	—
punctuation.separator, punctuation.terminator, punctuation.comma, punctuation.dot, punctuation.separator.dart, punctuation.comma.dart, punctuation.dot.dart, other.source.dart	#9899c5	bold
constant.other.color, keyword.other.template, keyword.other.substitution	#ff537b	—
entity.name.function, support.function.go	#79b9ee	bold
support.function, support.macro	#a0deff	bold
variable.language.this	#b973ff	italic
variable.function, variable.annotation, meta.function-call.generic	#79b9ee	—
support.constant	#f29e74	italic
entity.name.import, entity.name.package	#c0dd86	—
storage.modifier.import.java, entity.name.type.namespace.cs	#ffcb6b	—
meta.diff, meta.diff.header	#5343e3	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#9e5bff	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#b973ff	—
meta.function.decorator.python, support.token.decorator.python,meta.function.decorator.identifier.python	#fff79f	—
variable.parameter.function.language.python, variable.parameter.function.python, variable.parameter.function.js, variable.parameter.function, variable.parameter, meta.definition.variable.name, meta.parameter	#e0bdf2	italic
message.error	#ff537b	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit	#c9adff	—
meta.tag.sgml	#9899c5	—
storage.type.function	#9e5bff	—
punctuation.accessor	#f29e74	—
constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#cae790	—
keyword.operator.arithmetic.go, keyword.operator.address.go	#9e5bff	—
entity.name.package.go	#f5dd87	—
source.go storage.type	#f5dd87	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, variable.other.object.cs, entity.other.inherited-class	#ffcb6b	—
support.type	#ffcb6b	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#b973ff	—
entity.name.method.js	#79b9ee	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#79b9ee	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#fff79f	—
source.js constant.other.object.key.js string.unquoted.label.js	#d34c6d	italic
entity.name.tag, text.html.derivative	#ee6584	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#9899c5	—
meta.tag, text.html.basic, text.html.basic source, text.html.basic source.html, text.html.basic source.html entity.other.attribute-name, text.html.basic source.html entity.other.attribute-name.html, text.html.basic source.html entity.other.attribute-value, text.html.basic source.html punctuation.definition.string, text.html.basic source.html string.quoted.double, text.html.basic source.html string.quoted.single, text.html.basic source.html string.unquoted, text.html.derivative	#dcdfeb	—
entity.other.attribute-name	#e99c76	italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css	#a0deff	—
entity.other.attribute-name.class	#ffcb6b	—
entity.other.attribute-name.id	#95e6cb	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#9899c5	italic
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass	#ff7492	—
keyword.other.unit.css, constant.numeric.css	#c9adff	—
keyword.other.unit, support.constant.property-value.css, meta.property-value.css, meta.property-list.css, source.css, constant.other.color.rgb-value.hex.css	#f29e74	—
keyword.other.important	#9e5bff	italic
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#51597e	—
string.regexp, constant.character, constant.other	#95e6cb	—
url, link, uri	—	underline
source.json meta.structure.dictionary.json support.type.property-name.json	#ee6584	—
text.html.markdown, punctuation.definition.list_item.markdown	#dcdfeb	—
markup.heading.markdown punctuation.definition.heading.markdown	#82002f	bold
markup.heading.markdown entity.name	#ee6584	bold
punctuation.definition.list.begin.markdown	#f29e74	—
markup.italic	#95e6cb	italic
markup.bold, markup.bold string	#95e6cb	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#95e6cb	bold italic
markup.underline	#e0bdf2	underline
markup.quote punctuation.definition.blockquote.markdown, markup.quote	#9899c5	—
string.other.link.title.markdown	#79b9ee	—
markup.inline.raw.string.markdown	#ee6584	—
string.other.link.description.title.markdown	#9e5bff	—
meta.separator	#f29e74	bold
markup.table	#dcdfeb	—
markup.inserted	#89d59b	—
markup.deleted	#731d2b	—
markup.changed	#83bcf1	—

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