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 Light Bordered

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#6c51e2
activityBar.background#f8f4fa
activityBar.border#ecdeff
activityBar.foreground#5c6166
activityBar.inactiveForeground#8a919999
activityBarBadge.background#aeaaff
activityBarBadge.foreground#ffffff
badge.background#aeaaff33
badge.foreground#d7d1ff
button.background#aeaaff
button.foreground#ffffff
button.hoverBackground#a4a0f5
button.secondaryBackground#8a919933
button.secondaryForeground#5c6166
button.secondaryHoverBackground#8a919980
debugConsoleInputIcon.foreground#aeaaff
debugExceptionWidget.background#f8f4fa
debugExceptionWidget.border#ecdeff
debugIcon.breakpointDisabledForeground#79b6ff80
debugIcon.breakpointForeground#79b6ff
debugToolBar.background#f8f4fa
descriptionForeground#8a9199
diffEditor.border#ecdeff
diffEditor.diagonalFill#ecdeff
diffEditor.insertedTextBackground#99cc991f
diffEditor.removedTextBackground#d53f751f
dropdown.background#f5f3f5
dropdown.border#8a919945
dropdown.foreground#8a9199
editor.background#f8f4fa
editor.findMatchBackground#c5c0ff73
editor.findMatchBorder#c5c0ff73
editor.findMatchHighlightBackground#aeaaff40
editor.findMatchHighlightBorder#aeaaff40
editor.findRangeHighlightBackground#aeaaff40
editor.foreground#5c6166
editor.inactiveSelectionBackground#aeaaff26
editor.lineHighlightBackground#ebe9eb
editor.rangeHighlightBackground#c5c0ff33
editor.selectionBackground#aeaaff40
editor.selectionHighlightBackground#aeaaff26
editor.selectionHighlightBorder#aeaaff26
editor.wordHighlightBackground#aeaaff66
editor.wordHighlightBorder#aeaaff66
editor.wordHighlightStrongBackground#aeaaff66
editor.wordHighlightStrongBorder#e1dcff
editorBracketHighlight.foreground1#f3a84d
editorBracketHighlight.foreground2#e68aff
editorBracketHighlight.foreground3#49d9e8
editorBracketMatch.background#4951624d
editorBracketMatch.border#49516280
editorCursor.foreground#ff00e4
editorError.foreground#e04a7e
editorGroup.border#ecdeff
editorGroupHeader.noTabsBackground#f5f3f5
editorGroupHeader.tabsBackground#f5f3f5
editorGroupHeader.tabsBorder#ecdeff
editorGutter.addedBackground#99cc99cc
editorGutter.deletedBackground#d53f75cc
editorGutter.modifiedBackground#84c0ffcc
editorHoverWidget.background#f5f3f5
editorHoverWidget.border#ecdeff
editorIndentGuide.activeBackground1#6c51e299
editorIndentGuide.background1#6c51e21a
editorInfo.foreground#79b6ff
editorInlayHint.background#ecdeff
editorInlayHint.foreground#8a9199
editorLineNumber.activeForeground#495162
editorLineNumber.foreground#49516266
editorMarkerNavigation.background#f8f4fa
editorOverviewRuler.addedForeground#99cc99
editorOverviewRuler.border#ecdeff
editorOverviewRuler.bracketMatchForeground#495162b3
editorOverviewRuler.deletedForeground#d53f75
editorOverviewRuler.errorForeground#e04a7e
editorOverviewRuler.findMatchForeground#c5c0ff80
editorOverviewRuler.infoForeground#79b6ff
editorOverviewRuler.modifiedForeground#84c0ff
editorOverviewRuler.warningForeground#e0b494
editorOverviewRuler.wordHighlightForeground#84c0ff66
editorOverviewRuler.wordHighlightStrongForeground#99cc9966
editorRuler.foreground#6c51e21a
editorSuggestWidget.background#f8f4fa
editorSuggestWidget.border#ecdeff
editorSuggestWidget.highlightForeground#aeaaff
editorSuggestWidget.selectedBackground#aeaaff66
editorWarning.foreground#e0b494
editorWhitespace.foreground#49516266
editorWidget.background#f8f4fa
editorWidget.border#ecdeff
errorForeground#e04a7e
extensionButton.prominentBackground#aeaaff
extensionButton.prominentForeground#5c6166
extensionButton.prominentHoverBackground#a4a0f5
focusBorder#6c51e2
foreground#5c6166
gitDecoration.conflictingResourceForeground#e04a7eb3
gitDecoration.deletedResourceForeground#d53f75
gitDecoration.ignoredResourceForeground#8a919980
gitDecoration.modifiedResourceForeground#84c0ff
gitDecoration.submoduleResourceForeground#f0b838b3
gitDecoration.untrackedResourceForeground#99cc99
icon.foreground#8a9199
input.background#f8f4fa
input.border#8a919940
input.foreground#5c6166
input.placeholderForeground#8a919980
inputOption.activeBackground#aeaaff33
inputOption.activeBorder#aeaaff4d
inputOption.activeForeground#aeaaff
inputValidation.errorBackground#f8f4fa
inputValidation.errorBorder#e04a7e
inputValidation.infoBackground#f8f4fa
inputValidation.infoBorder#79b6ff
inputValidation.warningBackground#f8f4fa
inputValidation.warningBorder#e0b494
keybindingLabel.background#8a91991a
keybindingLabel.border#5c61661a
keybindingLabel.bottomBorder#5c61661a
keybindingLabel.foreground#5c6166
list.activeSelectionBackground#aeaaff66
list.activeSelectionForeground#5c6166
list.deemphasizedForeground#e04a7e
list.errorForeground#fc6495
list.filterMatchBackground#9f9cef40
list.filterMatchBorder#aeaaff40
list.focusBackground#aeaaff66
list.focusForeground#5c6166
list.focusOutline#aeaaff66
list.highlightForeground#ffffff
list.hoverBackground#aeaaff1a
list.hoverForeground#5c6166
list.inactiveSelectionBackground#aeaaff4d
list.inactiveSelectionForeground#5c6166
list.invalidItemForeground#fc6495
list.warningForeground#e0b494
listFilterWidget.background#f8f4fa
listFilterWidget.noMatchesOutline#e04a7e
listFilterWidget.outline#6c51e2
menu.background#f8f4fa
menu.border#ecdeff
menu.foreground#474c50
menu.selectionBackground#aeaaff66
menu.selectionBorder#aeaaff66
menu.selectionForeground#5c6166
menu.separatorBackground#5d646b
menubar.selectionBackground#aeaaff66
menubar.selectionBorder#aeaaff66
menubar.selectionForeground#5c6166
minimap.background#f8f4fa
minimap.errorHighlight#e04a7e
minimap.findMatchHighlight#6c51e2cc
minimap.infoHighlight#79b6ff
minimap.selectionHighlight#6c51e2b3
minimap.selectionOccurrenceHighlight#6c51e2f2
minimap.warningHighlight#e0b494
minimapGutter.addedBackground#99cc99
minimapGutter.deletedBackground#d53f75
minimapGutter.modifiedBackground#84c0ff
panel.background#f5f3f5
panel.border#ecdeff
panelTitle.activeBorder#6c51e2
panelTitle.activeForeground#5c6166
panelTitle.inactiveForeground#8a9199
peekView.border#aeaaff66
peekViewEditor.background#f5f3f5
peekViewEditor.matchHighlightBackground#aeaaff40
peekViewEditor.matchHighlightBorder#9f9cef40
peekViewResult.background#f5f3f5
peekViewResult.fileForeground#5c6166
peekViewResult.lineForeground#8a9199
peekViewResult.matchHighlightBackground#aeaaff40
peekViewResult.selectionBackground#aeaaff66
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#aeaaff66
peekViewTitleDescription.foreground#8a9199
peekViewTitleLabel.foreground#5c6166
pickerGroup.border#ecdeff
pickerGroup.foreground#aeaaff
progressBar.background#aeaaff
scrollbar.shadow#ecdeff66
scrollbarSlider.activeBackground#aeaaff99
scrollbarSlider.background#aeaaff4d
scrollbarSlider.hoverBackground#aeaaff66
selection.background#aeaaff40
settings.checkboxBackground#f0eef0
settings.checkboxBorder#6c51e280
settings.checkboxForeground#5c6166b3
settings.focusedRowBackground#aeaaff33
settings.headerForeground#5c6166
sideBar.background#f5f3f5
sideBar.border#ecdeff
sideBar.foreground#8a9199
sideBarSectionHeader.background#f5f3f5
sideBarSectionHeader.border#ecdeff
sideBarSectionHeader.foreground#bac1ca
sideBarTitle.foreground#8a9199
statusBar.background#f5f3f5
statusBar.border#ecdeff
statusBar.debuggingBackground#e0b494
statusBar.debuggingBorder#f5f3f5
statusBar.debuggingForeground#5d646b
statusBar.foreground#8a9199
statusBar.noFolderBackground#f8f4fa
statusBarItem.activeBackground#8a919933
statusBarItem.hoverBackground#8a919933
statusBarItem.prominentBackground#ecdeff
statusBarItem.prominentHoverBackground#bb99ff40
statusBarItem.remoteBackground#aeaaff
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#9f9cef
statusBarItem.remoteHoverForeground#ffffff
tab.activeBackground#f8f4fa
tab.activeBorder#ecdeff
tab.activeBorderTop#6c51e2
tab.activeForeground#5c6166
tab.border#ecdeff
tab.hoverBackground#aeaaff1a
tab.inactiveBackground#f5f3f5
tab.inactiveForeground#8a9199
tab.unfocusedActiveBorder#6c51e280
tab.unfocusedActiveBorderTop#f5f3f5
tab.unfocusedActiveForeground#8a9199
tab.unfocusedHoverBackground#aeaaff1a
tab.unfocusedInactiveForeground#8a9199
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#f5f3f5
terminal.foreground#4f5459
textBlockQuote.background#f8f4fa
textLink.activeForeground#8767fc
textLink.foreground#6c51e2
textPreformat.background#ffffff
textPreformat.foreground#5c6166
titleBar.activeBackground#f5f3f5
titleBar.activeForeground#5c6166
titleBar.border#ecdeff
titleBar.inactiveBackground#f5f3f5
titleBar.inactiveForeground#8a9199
tree.indentGuidesStroke#6c51e299
walkThrough.embeddedEditorBackground#f8f4fa
welcomePage.progress.background#6c51e2
welcomePage.tileBackground#f5f3f5
widget.shadow#bb99ff40

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	#f0b838	—
variable.member	#f29e74	—
invalid	#e04a7e	—
keyword, keyword.control, keyword.other	#ad72f3	—
storage.type, storage.modifier	#ad72f3	—
keyword.operator, keyword.operator.assignment.go	#ad72f3	—
string, constant.other.symbol	#46c42d	—
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	#e04a7e	—
entity.name.function, support.function.go	#42a0ed	bold
support.function, support.macro	#71c4ff	bold
variable.language.this	#c78aff	italic
variable.function, variable.annotation, meta.function-call.generic	#42a0ed	—
support.constant	#f29e74	italic
entity.name.import, entity.name.package	#39ba21	—
storage.modifier.import.java, entity.name.type.namespace.cs	#ffa861	—
meta.diff, meta.diff.header	#aeaaff	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#ad72f3	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#c78aff	—
meta.function.decorator.python, support.token.decorator.python,meta.function.decorator.identifier.python	#ffd152	—
variable.parameter.function.language.python, variable.parameter.function.python, variable.parameter.function.js, variable.parameter.function, variable.parameter, meta.definition.variable.name, meta.parameter	#dd9ffc	italic
message.error	#e04a7e	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit	#bb99ff	—
meta.tag.sgml	#9899c5	—
storage.type.function	#ad72f3	—
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	#46c42d	—
keyword.operator.arithmetic.go, keyword.operator.address.go	#ad72f3	—
entity.name.package.go	#f0b838	—
source.go storage.type	#f0b838	—
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	#ffa861	—
support.type	#ffa861	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c78aff	—
entity.name.method.js	#42a0ed	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#42a0ed	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#ffd152	—
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	#5c6166	—
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	#71c4ff	—
entity.other.attribute-name.class	#ffa861	—
entity.other.attribute-name.id	#58dbaf	—
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	#bb99ff	—
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	#ad72f3	italic
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#6f757d	—
string.regexp, constant.character, constant.other	#58dbaf	—
url, link, uri	—	underline
source.json meta.structure.dictionary.json support.type.property-name.json	#ee6584	—
text.html.markdown, punctuation.definition.list_item.markdown	#5c6166	—
markup.heading.markdown punctuation.definition.heading.markdown	#82002f	bold
markup.heading.markdown entity.name	#ee6584	bold
punctuation.definition.list.begin.markdown	#f29e74	—
markup.italic	#58dbaf	italic
markup.bold, markup.bold string	#58dbaf	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	#58dbaf	bold italic
markup.underline	#dd9ffc	underline
markup.quote punctuation.definition.blockquote.markdown, markup.quote	#9899c5	—
string.other.link.title.markdown	#42a0ed	—
markup.inline.raw.string.markdown	#ee6584	—
string.other.link.description.title.markdown	#ad72f3	—
meta.separator	#f29e74	bold
markup.table	#5c6166	—
markup.inserted	#99cc99	—
markup.deleted	#d53f75	—
markup.changed	#84c0ff	—

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