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 — Nighty 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#1d1a24
activityBar.border#161620
activityBar.foreground#edecee
activityBar.inactiveForeground#80748c99
activityBarBadge.background#a277ff
activityBarBadge.foreground#ffffff
badge.background#a277ff33
badge.foreground#cc9dff
button.background#a277ff
button.foreground#ffffff
button.hoverBackground#986ef4
button.secondaryBackground#80748c33
button.secondaryForeground#edecee
button.secondaryHoverBackground#80748c80
debugConsoleInputIcon.foreground#a277ff
debugExceptionWidget.background#1d1a24
debugExceptionWidget.border#161620
debugIcon.breakpointDisabledForeground#79b6ff80
debugIcon.breakpointForeground#79b6ff
debugToolBar.background#1d1a24
descriptionForeground#80748c
diffEditor.border#161620
diffEditor.diagonalFill#161620
diffEditor.insertedTextBackground#99cc991f
diffEditor.removedTextBackground#d53f751f
dropdown.background#1d1a24
dropdown.border#80748c45
dropdown.foreground#80748c
editor.background#1d1a24
editor.findMatchBackground#ba8cff73
editor.findMatchBorder#ba8cff73
editor.findMatchHighlightBackground#a277ff40
editor.findMatchHighlightBorder#a277ff40
editor.findRangeHighlightBackground#a277ff40
editor.foreground#edecee
editor.inactiveSelectionBackground#a277ff26
editor.lineHighlightBackground#24212c
editor.rangeHighlightBackground#ba8cff33
editor.selectionBackground#a277ff40
editor.selectionHighlightBackground#a277ff26
editor.selectionHighlightBorder#a277ff26
editor.wordHighlightBackground#a277ff66
editor.wordHighlightBorder#a277ff66
editor.wordHighlightStrongBackground#a277ff66
editor.wordHighlightStrongBorder#d7a7ff
editorBracketHighlight.foreground1#f3a84d
editorBracketHighlight.foreground2#e68aff
editorBracketHighlight.foreground3#49d9e8
editorBracketMatch.background#9d92be4d
editorBracketMatch.border#9d92be80
editorCursor.foreground#a277ff
editorError.foreground#e04a7e
editorGroup.border#161620
editorGroupHeader.noTabsBackground#1d1a24
editorGroupHeader.tabsBackground#1d1a24
editorGroupHeader.tabsBorder#161620
editorGutter.addedBackground#99cc99cc
editorGutter.deletedBackground#d53f75cc
editorGutter.modifiedBackground#84c0ffcc
editorHoverWidget.background#1d1a24
editorHoverWidget.border#161620
editorIndentGuide.activeBackground1#aeaaff99
editorIndentGuide.background1#aeaaff1a
editorInfo.foreground#79b6ff
editorInlayHint.background#161620
editorInlayHint.foreground#80748c
editorLineNumber.activeForeground#9d92be
editorLineNumber.foreground#9d92be66
editorMarkerNavigation.background#1d1a24
editorOverviewRuler.addedForeground#99cc99
editorOverviewRuler.border#161620
editorOverviewRuler.bracketMatchForeground#9d92beb3
editorOverviewRuler.deletedForeground#d53f75
editorOverviewRuler.errorForeground#e04a7e
editorOverviewRuler.findMatchForeground#ba8cff80
editorOverviewRuler.infoForeground#79b6ff
editorOverviewRuler.modifiedForeground#84c0ff
editorOverviewRuler.warningForeground#e0b494
editorOverviewRuler.wordHighlightForeground#84c0ff66
editorOverviewRuler.wordHighlightStrongForeground#99cc9966
editorRuler.foreground#aeaaff1a
editorSuggestWidget.background#1d1a24
editorSuggestWidget.border#161620
editorSuggestWidget.highlightForeground#a277ff
editorSuggestWidget.selectedBackground#a277ff66
editorWarning.foreground#e0b494
editorWhitespace.foreground#9d92be66
editorWidget.background#1d1a24
editorWidget.border#161620
errorForeground#e04a7e
extensionButton.prominentBackground#a277ff
extensionButton.prominentForeground#edecee
extensionButton.prominentHoverBackground#986ef4
focusBorder#aeaaff
foreground#edecee
gitDecoration.conflictingResourceForeground#e04a7eb3
gitDecoration.deletedResourceForeground#d53f75
gitDecoration.ignoredResourceForeground#80748c80
gitDecoration.modifiedResourceForeground#84c0ff
gitDecoration.submoduleResourceForeground#f5dd87b3
gitDecoration.untrackedResourceForeground#99cc99
icon.foreground#80748c
input.background#1d1a24
input.border#80748c40
input.foreground#edecee
input.placeholderForeground#80748c80
inputOption.activeBackground#a277ff33
inputOption.activeBorder#a277ff4d
inputOption.activeForeground#a277ff
inputValidation.errorBackground#1d1a24
inputValidation.errorBorder#e04a7e
inputValidation.infoBackground#1d1a24
inputValidation.infoBorder#79b6ff
inputValidation.warningBackground#1d1a24
inputValidation.warningBorder#e0b494
keybindingLabel.background#80748c1a
keybindingLabel.border#edecee1a
keybindingLabel.bottomBorder#edecee1a
keybindingLabel.foreground#edecee
list.activeSelectionBackground#a277ff66
list.activeSelectionForeground#edecee
list.deemphasizedForeground#e04a7e
list.errorForeground#fc6495
list.filterMatchBackground#9269ef40
list.filterMatchBorder#a277ff40
list.focusBackground#a277ff66
list.focusForeground#edecee
list.focusOutline#a277ff66
list.highlightForeground#ffd9ff
list.hoverBackground#a277ff1a
list.hoverForeground#edecee
list.inactiveSelectionBackground#a277ff4d
list.inactiveSelectionForeground#edecee
list.invalidItemForeground#fc6495
list.warningForeground#e0b494
listFilterWidget.background#1d1a24
listFilterWidget.noMatchesOutline#e04a7e
listFilterWidget.outline#aeaaff
menu.background#1d1a24
menu.border#161620
menu.foreground#d4d3d5
menu.selectionBackground#a277ff66
menu.selectionBorder#a277ff66
menu.selectionForeground#edecee
menu.separatorBackground#53485f
menubar.selectionBackground#a277ff66
menubar.selectionBorder#a277ff66
menubar.selectionForeground#edecee
minimap.background#1d1a24
minimap.errorHighlight#e04a7e
minimap.findMatchHighlight#aeaaffcc
minimap.infoHighlight#79b6ff
minimap.selectionHighlight#aeaaffb3
minimap.selectionOccurrenceHighlight#aeaafff2
minimap.warningHighlight#e0b494
minimapGutter.addedBackground#99cc99
minimapGutter.deletedBackground#d53f75
minimapGutter.modifiedBackground#84c0ff
panel.background#1d1a24
panel.border#161620
panelTitle.activeBorder#aeaaff
panelTitle.activeForeground#edecee
panelTitle.inactiveForeground#80748c
peekView.border#a277ff66
peekViewEditor.background#1d1a24
peekViewEditor.matchHighlightBackground#a277ff40
peekViewEditor.matchHighlightBorder#9269ef40
peekViewResult.background#1d1a24
peekViewResult.fileForeground#edecee
peekViewResult.lineForeground#80748c
peekViewResult.matchHighlightBackground#a277ff40
peekViewResult.selectionBackground#a277ff66
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#a277ff66
peekViewTitleDescription.foreground#80748c
peekViewTitleLabel.foreground#edecee
pickerGroup.border#161620
pickerGroup.foreground#a277ff
progressBar.background#a277ff
scrollbar.shadow#16162066
scrollbarSlider.activeBackground#a277ff99
scrollbarSlider.background#a277ff4d
scrollbarSlider.hoverBackground#a277ff66
selection.background#a277ff40
settings.checkboxBackground#191620
settings.checkboxBorder#aeaaff80
settings.checkboxForeground#edeceeb3
settings.focusedRowBackground#a277ff33
settings.headerForeground#edecee
sideBar.background#1d1a24
sideBar.border#161620
sideBar.foreground#80748c
sideBarSectionHeader.background#1d1a24
sideBarSectionHeader.border#161620
sideBarSectionHeader.foreground#afa3bc
sideBarTitle.foreground#80748c
statusBar.background#1d1a24
statusBar.border#161620
statusBar.debuggingBackground#e0b494
statusBar.debuggingBorder#1d1a24
statusBar.debuggingForeground#53485f
statusBar.foreground#80748c
statusBar.noFolderBackground#1d1a24
statusBarItem.activeBackground#80748c33
statusBarItem.hoverBackground#80748c33
statusBarItem.prominentBackground#161620
statusBarItem.prominentHoverBackground#0000004f
statusBarItem.remoteBackground#a277ff
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#9269ef
statusBarItem.remoteHoverForeground#ffffff
tab.activeBackground#1d1a24
tab.activeBorder#161620
tab.activeBorderTop#aeaaff
tab.activeForeground#edecee
tab.border#161620
tab.hoverBackground#a277ff1a
tab.inactiveBackground#1d1a24
tab.inactiveForeground#80748c
tab.unfocusedActiveBorder#aeaaff80
tab.unfocusedActiveBorderTop#1d1a24
tab.unfocusedActiveForeground#80748c
tab.unfocusedHoverBackground#a277ff1a
tab.unfocusedInactiveForeground#80748c
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#1d1a24
terminal.foreground#dedddf
textBlockQuote.background#1d1a24
textLink.activeForeground#c7c2ff
textLink.foreground#aeaaff
textPreformat.background#3c3843
textPreformat.foreground#edecee
titleBar.activeBackground#1d1a24
titleBar.activeForeground#edecee
titleBar.border#161620
titleBar.inactiveBackground#1d1a24
titleBar.inactiveForeground#80748c
tree.indentGuidesStroke#aeaaff99
walkThrough.embeddedEditorBackground#1d1a24
welcomePage.progress.background#aeaaff
welcomePage.tileBackground#1d1a24
widget.shadow#0000004f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#676e78	italic
variable, variable.parameter.function-call, variable.language, entity.name.variable.local.cs, meta.method.body	#ee6488	—
variable.other.constant, constant.other.color	#f5dd87	—
variable.member	#f29e74	—
invalid	#e04a7e	—
keyword, keyword.control, keyword.other	#a277ff	—
storage.type, storage.modifier	#a277ff	—
keyword.operator, keyword.operator.assignment.go	#a277ff	—
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	#e04a7e	—
entity.name.function, support.function.go	#6da8f2	bold
support.function, support.macro	#95cdff	bold
variable.language.this	#bc8fff	italic
variable.function, variable.annotation, meta.function-call.generic	#6da8f2	—
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	#a277ff	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#a277ff	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#bc8fff	—
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	#e04a7e	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit	#f29e74	—
meta.tag.sgml	#9899c5	—
storage.type.function	#a277ff	—
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	#a277ff	—
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	#bc8fff	—
entity.name.method.js	#6da8f2	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#6da8f2	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#fff79f	—
source.js constant.other.object.key.js string.unquoted.label.js	#d34b71	italic
entity.name.tag, text.html.derivative	#ee6488	—
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	#edecee	—
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	#95cdff	—
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	#ff7396	—
keyword.other.unit.css, constant.numeric.css	#f29e74	—
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	#a277ff	italic
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#655970	—
string.regexp, constant.character, constant.other	#95e6cb	—
url, link, uri	—	underline
source.json meta.structure.dictionary.json support.type.property-name.json	#ee6488	—
text.html.markdown, punctuation.definition.list_item.markdown	#edecee	—
markup.heading.markdown punctuation.definition.heading.markdown	#830032	bold
markup.heading.markdown entity.name	#ee6488	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	#6da8f2	—
markup.inline.raw.string.markdown	#ee6488	—
string.other.link.description.title.markdown	#a277ff	—
meta.separator	#f29e74	bold
markup.table	#edecee	—
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}!`;
}