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 — Piggy 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#ebaaff
activityBar.background#242430
activityBar.border#241723
activityBar.foreground#ddc8eb
activityBar.inactiveForeground#866c9a99
activityBarBadge.background#e263b9
activityBarBadge.foreground#ffffff
badge.background#e263b933
badge.foreground#ff8be1
button.background#e263b9
button.foreground#ffffff
button.hoverBackground#d759af
button.secondaryBackground#866c9a33
button.secondaryForeground#ddc8eb
button.secondaryHoverBackground#866c9a80
debugConsoleInputIcon.foreground#e263b9
debugExceptionWidget.background#242430
debugExceptionWidget.border#241723
debugIcon.breakpointDisabledForeground#abf8fc80
debugIcon.breakpointForeground#abf8fc
debugToolBar.background#242430
descriptionForeground#866c9a
diffEditor.border#241723
diffEditor.diagonalFill#241723
diffEditor.insertedTextBackground#c6e7971f
diffEditor.removedTextBackground#f322611f
dropdown.background#222230
dropdown.border#866c9a45
dropdown.foreground#866c9a
editor.background#242430
editor.findMatchBackground#fa79cf73
editor.findMatchBorder#fa79cf73
editor.findMatchHighlightBackground#e263b940
editor.findMatchHighlightBorder#e263b940
editor.findRangeHighlightBackground#e263b940
editor.foreground#ddc8eb
editor.inactiveSelectionBackground#e263b926
editor.lineHighlightBackground#2a2a38
editor.rangeHighlightBackground#fa79cf33
editor.selectionBackground#e263b940
editor.selectionHighlightBackground#e263b926
editor.selectionHighlightBorder#e263b926
editor.wordHighlightBackground#e263b966
editor.wordHighlightBorder#e263b966
editor.wordHighlightStrongBackground#e263b966
editor.wordHighlightStrongBorder#ff95eb
editorBracketHighlight.foreground1#e263b9
editorBracketHighlight.foreground2#ebaaff
editorBracketHighlight.foreground3#f0c3ff
editorBracketMatch.background#866c9a4d
editorBracketMatch.border#866c9a80
editorCursor.foreground#ffe0ff
editorError.foreground#ff326a
editorGroup.border#241723
editorGroupHeader.noTabsBackground#222230
editorGroupHeader.tabsBackground#222230
editorGroupHeader.tabsBorder#241723
editorGutter.addedBackground#c6e797cc
editorGutter.deletedBackground#f32261cc
editorGutter.modifiedBackground#b5ffffcc
editorHoverWidget.background#222230
editorHoverWidget.border#241723
editorIndentGuide.activeBackground1#ebaaff99
editorIndentGuide.background1#ebaaff1a
editorInfo.foreground#abf8fc
editorInlayHint.background#241723
editorInlayHint.foreground#866c9a
editorLineNumber.activeForeground#866c9a
editorLineNumber.foreground#866c9a66
editorMarkerNavigation.background#242430
editorOverviewRuler.addedForeground#c6e797
editorOverviewRuler.border#241723
editorOverviewRuler.bracketMatchForeground#866c9ab3
editorOverviewRuler.deletedForeground#f32261
editorOverviewRuler.errorForeground#ff326a
editorOverviewRuler.findMatchForeground#fa79cf80
editorOverviewRuler.infoForeground#abf8fc
editorOverviewRuler.modifiedForeground#b5ffff
editorOverviewRuler.warningForeground#ff7e63
editorOverviewRuler.wordHighlightForeground#b5ffff66
editorOverviewRuler.wordHighlightStrongForeground#c6e79766
editorRuler.foreground#ebaaff1a
editorSuggestWidget.background#242430
editorSuggestWidget.border#241723
editorSuggestWidget.highlightForeground#e263b9
editorSuggestWidget.selectedBackground#e263b966
editorWarning.foreground#ff7e63
editorWhitespace.foreground#866c9a66
editorWidget.background#242430
editorWidget.border#241723
errorForeground#ff326a
extensionButton.prominentBackground#e263b9
extensionButton.prominentForeground#ddc8eb
extensionButton.prominentHoverBackground#d759af
focusBorder#ebaaff
foreground#ddc8eb
gitDecoration.conflictingResourceForeground#ff326ab3
gitDecoration.deletedResourceForeground#f32261
gitDecoration.ignoredResourceForeground#866c9a80
gitDecoration.modifiedResourceForeground#b5ffff
gitDecoration.submoduleResourceForeground#f0377bb3
gitDecoration.untrackedResourceForeground#c6e797
icon.foreground#866c9a
input.background#242430
input.border#866c9a40
input.foreground#ddc8eb
input.placeholderForeground#866c9a80
inputOption.activeBackground#e263b933
inputOption.activeBorder#e263b94d
inputOption.activeForeground#e263b9
inputValidation.errorBackground#242430
inputValidation.errorBorder#ff326a
inputValidation.infoBackground#242430
inputValidation.infoBorder#abf8fc
inputValidation.warningBackground#242430
inputValidation.warningBorder#ff7e63
keybindingLabel.background#866c9a1a
keybindingLabel.border#ddc8eb1a
keybindingLabel.bottomBorder#ddc8eb1a
keybindingLabel.foreground#ddc8eb
list.activeSelectionBackground#e263b966
list.activeSelectionForeground#ddc8eb
list.deemphasizedForeground#ff326a
list.errorForeground#ff5280
list.filterMatchBackground#d254aa40
list.filterMatchBorder#e263b940
list.focusBackground#e263b966
list.focusForeground#ddc8eb
list.focusOutline#e263b966
list.highlightForeground#ffc8ff
list.hoverBackground#e263b91a
list.hoverForeground#ddc8eb
list.inactiveSelectionBackground#e263b94d
list.inactiveSelectionForeground#ddc8eb
list.invalidItemForeground#ff5280
list.warningForeground#ff7e63
listFilterWidget.background#242430
listFilterWidget.noMatchesOutline#ff326a
listFilterWidget.outline#ebaaff
menu.background#242430
menu.border#241723
menu.foreground#c4afd2
menu.selectionBackground#e263b966
menu.selectionBorder#e263b966
menu.selectionForeground#ddc8eb
menu.separatorBackground#58416c
menubar.selectionBackground#e263b966
menubar.selectionBorder#e263b966
menubar.selectionForeground#ddc8eb
minimap.background#242430
minimap.errorHighlight#ff326a
minimap.findMatchHighlight#ebaaffcc
minimap.infoHighlight#abf8fc
minimap.selectionHighlight#ebaaffb3
minimap.selectionOccurrenceHighlight#ebaafff2
minimap.warningHighlight#ff7e63
minimapGutter.addedBackground#c6e797
minimapGutter.deletedBackground#f32261
minimapGutter.modifiedBackground#b5ffff
panel.background#222230
panel.border#241723
panelTitle.activeBorder#ebaaff
panelTitle.activeForeground#ddc8eb
panelTitle.inactiveForeground#866c9a
peekView.border#e263b966
peekViewEditor.background#222230
peekViewEditor.matchHighlightBackground#e263b940
peekViewEditor.matchHighlightBorder#d254aa40
peekViewResult.background#222230
peekViewResult.fileForeground#ddc8eb
peekViewResult.lineForeground#866c9a
peekViewResult.matchHighlightBackground#e263b940
peekViewResult.selectionBackground#e263b966
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#e263b966
peekViewTitleDescription.foreground#866c9a
peekViewTitleLabel.foreground#ddc8eb
pickerGroup.border#241723
pickerGroup.foreground#e263b9
progressBar.background#e263b9
scrollbar.shadow#24172366
scrollbarSlider.activeBackground#e263b999
scrollbarSlider.background#e263b94d
scrollbarSlider.hoverBackground#e263b966
selection.background#e263b940
settings.checkboxBackground#1e1e2c
settings.checkboxBorder#ebaaff80
settings.checkboxForeground#ddc8ebb3
settings.focusedRowBackground#e263b933
settings.headerForeground#ddc8eb
sideBar.background#222230
sideBar.border#241723
sideBar.foreground#866c9a
sideBarSectionHeader.background#222230
sideBarSectionHeader.border#241723
sideBarSectionHeader.foreground#b69acb
sideBarTitle.foreground#866c9a
statusBar.background#222230
statusBar.border#241723
statusBar.debuggingBackground#ff7e63
statusBar.debuggingBorder#222230
statusBar.debuggingForeground#58416c
statusBar.foreground#866c9a
statusBar.noFolderBackground#242430
statusBarItem.activeBackground#866c9a33
statusBarItem.hoverBackground#866c9a33
statusBarItem.prominentBackground#241723
statusBarItem.prominentHoverBackground#0000004f
statusBarItem.remoteBackground#e263b9
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#d254aa
statusBarItem.remoteHoverForeground#ffffff
tab.activeBackground#242430
tab.activeBorder#241723
tab.activeBorderTop#ebaaff
tab.activeForeground#ddc8eb
tab.border#241723
tab.hoverBackground#e263b91a
tab.inactiveBackground#222230
tab.inactiveForeground#866c9a
tab.unfocusedActiveBorder#ebaaff80
tab.unfocusedActiveBorderTop#222230
tab.unfocusedActiveForeground#866c9a
tab.unfocusedHoverBackground#e263b91a
tab.unfocusedInactiveForeground#866c9a
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#222230
terminal.foreground#ceb9dc
textBlockQuote.background#242430
textLink.activeForeground#ffc3ff
textLink.foreground#ebaaff
textPreformat.background#444351
textPreformat.foreground#ddc8eb
titleBar.activeBackground#222230
titleBar.activeForeground#ddc8eb
titleBar.border#241723
titleBar.inactiveBackground#222230
titleBar.inactiveForeground#866c9a
tree.indentGuidesStroke#ebaaff99
walkThrough.embeddedEditorBackground#242430
welcomePage.progress.background#ebaaff
welcomePage.tileBackground#222230
widget.shadow#0000004f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7d607f	italic
variable, variable.parameter.function-call, variable.language, entity.name.variable.local.cs, meta.method.body	#ee64ad	—
variable.other.constant, constant.other.color	#f0377b	—
variable.member	#f0377b	—
invalid	#ff326a	—
keyword, keyword.control, keyword.other	#b034e2	—
storage.type, storage.modifier	#b034e2	—
keyword.operator, keyword.operator.assignment.go	#b034e2	—
string, constant.other.symbol	#e98ed0	—
punctuation.separator, punctuation.terminator, punctuation.comma, punctuation.dot, punctuation.separator.dart, punctuation.comma.dart, punctuation.dot.dart, other.source.dart	#b298c5	bold
constant.other.color, keyword.other.template, keyword.other.substitution	#ff326a	—
entity.name.function, support.function.go	#bd79ee	bold
support.function, support.macro	#e49dff	bold
variable.language.this	#cb50fc	italic
variable.function, variable.annotation, meta.function-call.generic	#bd79ee	—
support.constant	#f0377b	italic
entity.name.import, entity.name.package	#df84c6	—
storage.modifier.import.java, entity.name.type.namespace.cs	#e6a51d	—
meta.diff, meta.diff.header	#e263b9	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#b034e2	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#cb50fc	—
meta.function.decorator.python, support.token.decorator.python,meta.function.decorator.identifier.python	#ff5592	—
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	#ff326a	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit	#c9adff	—
meta.tag.sgml	#b298c5	—
storage.type.function	#b034e2	—
punctuation.accessor	#f0377b	—
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	#e98ed0	—
keyword.operator.arithmetic.go, keyword.operator.address.go	#b034e2	—
entity.name.package.go	#f0377b	—
source.go storage.type	#f0377b	—
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	#e6a51d	—
support.type	#e6a51d	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#cb50fc	—
entity.name.method.js	#bd79ee	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#bd79ee	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#ff5592	—
source.js constant.other.object.key.js string.unquoted.label.js	#d34a95	italic
entity.name.tag, text.html.derivative	#ee64ad	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#b298c5	—
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	#ddc8eb	—
entity.other.attribute-name	#ff85b4	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	#e49dff	—
entity.other.attribute-name.class	#e6a51d	—
entity.other.attribute-name.id	#e695da	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#b298c5	italic
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass	#fe73bc	—
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	#f0377b	—
keyword.other.important	#b034e2	italic
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#6a527e	—
string.regexp, constant.character, constant.other	#e695da	—
url, link, uri	—	underline
source.json meta.structure.dictionary.json support.type.property-name.json	#ee64ad	—
text.html.markdown, punctuation.definition.list_item.markdown	#ddc8eb	—
markup.heading.markdown punctuation.definition.heading.markdown	#840051	bold
markup.heading.markdown entity.name	#ee64ad	bold
punctuation.definition.list.begin.markdown	#f0377b	—
markup.italic	#e695da	italic
markup.bold, markup.bold string	#e695da	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	#e695da	bold italic
markup.underline	#e0bdf2	underline
markup.quote punctuation.definition.blockquote.markdown, markup.quote	#b298c5	—
string.other.link.title.markdown	#bd79ee	—
markup.inline.raw.string.markdown	#ee64ad	—
string.other.link.description.title.markdown	#b034e2	—
meta.separator	#f0377b	bold
markup.table	#ddc8eb	—
markup.inserted	#c6e797	—
markup.deleted	#f32261	—
markup.changed	#b5ffff	—

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