sjsepan.ghostish

Name: sjsepan.ghostish
Author: sjsepan

Publisher: sjsepanThemes in package: 4

Ghost-ish, but with borders and with contrasting colors in Activity- and Side-bars. Forked from Setiish and using new syntax colors.

Open in VS Code

Color themes

VS Code preview

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

sjsepan.ghostish — Ghostish-ZenbonesDark

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.background#1a1a1a
activityBar.border#474747
activityBar.foreground#c4c4c4
activityBar.inactiveForeground#818181
activityBarBadge.background#c4c4c49b
activityBarBadge.foreground#000000
badge.background#c4c4c49b
badge.foreground#000000
breadcrumb.activeSelectionForeground#c4c4c4
breadcrumb.background#1a1a1a
breadcrumb.focusForeground#7d7d7d
breadcrumb.foreground#c4c4c4
button.background#303030
button.border#474747
button.foreground#c4c4c4
button.hoverBackground#3a3a3a
button.secondaryBackground#000000
button.secondaryForeground#c4c4c4
button.secondaryHoverBackground#818181
checkbox.background#000000
checkbox.border#000000
checkbox.foreground#c4c4c4
debugExceptionWidget.background#1a1a1a
debugExceptionWidget.border#c4c4c4
debugIcon.breakpointCurrentStackframeForeground#dedede
debugIcon.breakpointDisabledForeground#454545
debugIcon.breakpointForeground#666666
debugIcon.breakpointStackframeForeground#c4c4c4
debugIcon.breakpointUnverifiedForeground#454545
debugIcon.continueForeground#c4c4c4
debugIcon.disconnectForeground#5c5c5c
debugIcon.pauseForeground#666666
debugIcon.restartForeground#c4c4c4
debugIcon.startForeground#c4c4c4
debugIcon.stepBackForeground#666666
debugIcon.stepIntoForeground#666666
debugIcon.stepOutForeground#666666
debugIcon.stepOverForeground#666666
debugIcon.stopForeground#5c5c5c
debugTokenExpression.boolean#c4c4c4
debugTokenExpression.error#5c5c5c
debugTokenExpression.name#666666
debugTokenExpression.number#c4c4c4
debugTokenExpression.string#c4c4c4
debugTokenExpression.value#c4c4c4
debugToolBar.background#000000
debugToolBar.border#c4c4c4
diffEditor.border#000000
diffEditor.insertedTextBackground#1a1a1aee
diffEditor.insertedTextBorder#000000
diffEditor.removedTextBackground#1a1a1aee
diffEditor.removedTextBorder#000000
dropdown.background#000000
dropdown.border#000000
dropdown.foreground#c4c4c4
editor.background#000000
editor.findMatchBackground#000000
editor.findMatchBorder#c4c4c4
editor.findMatchHighlightBackground#818181ee
editor.findMatchHighlightBorder#818181
editor.findRangeHighlightBackground#1a1a1aee
editor.findRangeHighlightBorder#00000000
editor.foldBackground#1a1a1aee
editor.foreground#c4c4c4
editor.hoverHighlightBackground#1c1c1cee
editor.inactiveSelectionBackground#121212ee
editor.lineHighlightBackground#1a1a1a
editor.lineHighlightBorder#c4c4c480
editor.rangeHighlightBackground#0000000b
editor.rangeHighlightBorder#00000000
editor.selectionBackground#c4c4c440
editor.selectionHighlightBackground#c4c4c460
editor.selectionHighlightBorder#c4c4c4
editor.wordHighlightBackground#000000b8
editor.wordHighlightBorder#c4c4c4
editor.wordHighlightStrongBackground#000000ee
editor.wordHighlightStrongBorder#c4c4c4
editorBracketMatch.background#000000
editorBracketMatch.border#c4c4c4
editorCodeLens.foreground#818181
editorCursor.background#c4c4c4
editorCursor.foreground#c4c4c4
editorError.background#1a1a1aee
editorError.border#00000000
editorError.foreground#c4c4c4
editorGroup.border#474747
editorGroup.emptyBackground#000000
editorGroupHeader.border#474747
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#000000
editorGutter.addedBackground#c4c4c4
editorGutter.background#1a1a1a
editorGutter.commentRangeForeground#c4c4c4
editorGutter.deletedBackground#c4c4c4
editorGutter.foldingControlForeground#c4c4c4
editorGutter.modifiedBackground#c4c4c4
editorHoverWidget.background#1a1a1a
editorHoverWidget.border#c4c4c4
editorHoverWidget.foreground#c4c4c4
editorIndentGuide.activeBackground1#c4c4c4
editorIndentGuide.background1#c4c4c4
editorInfo.background#1a1a1aee
editorInfo.border#00000000
editorInfo.foreground#c4c4c4
editorLineNumber.activeForeground#c4c4c4
editorLineNumber.foreground#818181
editorLink.activeForeground#c4c4c4
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#c4c4c4
editorMarkerNavigationInfo.background#c4c4c4
editorMarkerNavigationWarning.background#c4c4c4
editorOverviewRuler.background#000000
editorOverviewRuler.border#000000
editorRuler.foreground#000000
editorSuggestWidget.background#1a1a1a
editorSuggestWidget.border#c4c4c4
editorSuggestWidget.foreground#818181
editorSuggestWidget.highlightForeground#c4c4c4
editorSuggestWidget.selectedBackground#1a1a1a
editorWarning.background#00000000
editorWarning.border#000000
editorWarning.foreground#818181
editorWhitespace.foreground#c4c4c4
editorWidget.background#1a1a1a
editorWidget.foreground#c4c4c4
editorWidget.resizeBorder#022004
focusBorder#c4c4c4
foreground#c4c4c4
gitDecoration.addedResourceForeground#dedede
gitDecoration.conflictingResourceForeground#5c5c5c
gitDecoration.deletedResourceForeground#212121
gitDecoration.ignoredResourceForeground#333333
gitDecoration.modifiedResourceForeground#c4c4c4
gitDecoration.stageDeletedResourceForeground#6e6e6e
gitDecoration.stageModifiedResourceForeground#6e6e6e
gitDecoration.submoduleResourceForeground#818181
gitDecoration.untrackedResourceForeground#818181
icon.foreground#c4c4c4
input.background#1a1a1a
input.border#818181
input.foreground#c4c4c4
input.placeholderForeground#818181
inputOption.activeBackground#3d3d3d
inputOption.activeBorder#c4c4c4
inputOption.activeForeground#c4c4c4
keybindingLabel.background#000000
keybindingLabel.foreground#c4c4c4
list.activeSelectionBackground#2b2b2b
list.activeSelectionForeground#c4c4c4
list.dropBackground#1a1a1a
list.focusBackground#1a1a1a
list.focusForeground#818181
list.highlightForeground#c4c4c4
list.hoverBackground#1a1a1a
list.hoverForeground#c4c4c4
list.inactiveSelectionBackground#121212
list.inactiveSelectionForeground#c4c4c4
listFilterWidget.background#1a1a1a
listFilterWidget.noMatchesOutline#c4c4c4
listFilterWidget.outline#c4c4c4
menu.background#000000
menu.border#c4c4c4
menu.foreground#c4c4c4
menu.selectionBackground#3d3d3d
menu.selectionBorder#00000000
menu.selectionForeground#000000
menu.separatorBackground#c4c4c4
menubar.selectionBackground#000000
menubar.selectionBorder#c4c4c4
menubar.selectionForeground#c4c4c4
merge.commonContentBackground#1a1a1aee
merge.commonHeaderBackground#1a1a1aee
merge.currentContentBackground#1a1a1aee
merge.currentHeaderBackground#1a1a1aee
merge.incomingContentBackground#1a1a1aee
merge.incomingHeaderBackground#1a1a1aee
minimap.background#1a1a1a
minimap.errorHighlight#c4c4c4
minimap.findMatchHighlight#000000ee
minimap.selectionHighlight#33333390
minimap.warningHighlight#818181
minimapGutter.addedBackground#c4c4c4
minimapGutter.deletedBackground#c4c4c4
minimapGutter.modifiedBackground#c4c4c4
minimapSlider.activeBackground#ffffff40
minimapSlider.background#ffffff20
minimapSlider.hoverBackground#ffffff60
notebook.cellHoverBackground#1a1a1a
notebook.cellInsertionIndicator#c4c4c4
notebook.cellStatusBarItemHoverBackground#333333
notebook.cellToolbarSeparator#454545
notebook.focusedCellBackground#000000
notebook.focusedCellBorder#666666
notebook.focusedEditorBorder#666666
notebook.outputContainerBackgroundColor#000000
notebook.symbolHighlightBackground#1a1a1a
notebookScrollbarSlider.activeBackground#454545
notebookScrollbarSlider.background#33333380
notebookScrollbarSlider.hoverBackground#454545
notebookStatusErrorIcon.foreground#5c5c5c
notebookStatusRunningIcon.foreground#c4c4c4
notebookStatusSuccessIcon.foreground#f0f0f0
notificationCenter.border#c4c4c4
notificationCenterHeader.background#1a1a1a
notificationCenterHeader.foreground#c4c4c4
notifications.background#1a1a1a
notifications.border#c4c4c4
notifications.foreground#c4c4c4
notificationsErrorIcon.foreground#c4c4c4
notificationsInfoIcon.foreground#c4c4c4
notificationsWarningIcon.foreground#c4c4c4
notificationToast.border#c4c4c4
panel.background#1a1a1a
panel.border#474747
panelSection.border#c4c4c4
panelTitle.activeBorder#c4c4c4
panelTitle.activeForeground#c4c4c4
panelTitle.inactiveForeground#818181
peekView.border#c4c4c4
peekViewEditor.background#1a1a1a
peekViewEditor.matchHighlightBackground#00000099
peekViewEditor.matchHighlightBorder#c4c4c4
peekViewEditorGutter.background#1a1a1a
peekViewResult.background#000000
peekViewResult.fileForeground#c4c4c4
peekViewResult.lineForeground#c4c4c4
peekViewResult.matchHighlightBackground#1a1a1a
peekViewResult.selectionBackground#1a1a1a
peekViewResult.selectionForeground#c4c4c4
peekViewTitle.background#000000
peekViewTitleDescription.foreground#c4c4c4
peekViewTitleLabel.foreground#c4c4c4
pickerGroup.border#c4c4c4
pickerGroup.foreground#c4c4c4
problemsErrorIcon.foreground#5c5c5c
problemsInfoIcon.foreground#87ff87
problemsWarningIcon.foreground#cdcd00
profileBadge.background#c4c4c49b
profileBadge.foreground#000000
progressBar.background#c4c4c4
scmGraph.foreground1default
scmGraph.foreground2default
scmGraph.foreground3default
scmGraph.foreground4default
scmGraph.foreground5default
scmGraph.historyItemBaseRefColordefault
scmGraph.historyItemHoverAdditionsForegrounddefault
scmGraph.historyItemHoverDefaultLabelBackgrounddefault
scmGraph.historyItemHoverDefaultLabelForegrounddefault
scmGraph.historyItemHoverDeletionsForegrounddefault
scmGraph.historyItemHoverLabelForegrounddefault
scmGraph.historyItemRefColor#858585
scmGraph.historyItemRemoteRefColordefault
scrollbar.shadow#c4c4c4dd
scrollbarSlider.activeBackground#ffffff40
scrollbarSlider.background#ffffff20
scrollbarSlider.hoverBackground#ffffff60
selection.background#424242
settings.checkboxBackground#000000
settings.checkboxBorder#666666
settings.checkboxForeground#666666
settings.dropdownBackground#000000
settings.dropdownBorder#666666
settings.dropdownForeground#666666
settings.dropdownListBorder#666666
settings.focusedRowBackground#ffffff07
settings.headerForeground#c4c4c4
sideBar.background#000000
sideBar.border#474747
sideBar.dropBackground#1a1a1a
sideBar.foreground#c4c4c4
sideBarSectionHeader.background#1a1a1a
sideBarSectionHeader.border#75757533
sideBarSectionHeader.foreground#c4c4c4
sideBarTitle.foreground#c4c4c4
statusBar.background#1a1a1a
statusBar.border#474747
statusBar.debuggingBackground#1a1a1a
statusBar.debuggingBorder#474747
statusBar.debuggingForeground#c4c4c4
statusBar.foreground#c4c4c4
statusBar.noFolderBackground#1a1a1a
statusBar.noFolderBorder#474747
statusBar.noFolderForeground#c4c4c4
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#c4c4c41f
statusBarItem.prominentBackground#666666
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#c4c4c4
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#c4c4c4
symbolIcon.arrayForeground#c4c4c4
symbolIcon.booleanForeground#c4c4c4
symbolIcon.classForeground#c4c4c4
symbolIcon.colorForeground#c4c4c4
symbolIcon.constantForeground#c4c4c4
symbolIcon.constructorForeground#c4c4c4
symbolIcon.enumeratorForeground#c4c4c4
symbolIcon.enumeratorMemberForeground#c4c4c4
symbolIcon.eventForeground#c4c4c4
symbolIcon.fieldForeground#c4c4c4
symbolIcon.fileForeground#f0f0f0
symbolIcon.folderForeground#f0f0f0
symbolIcon.functionForeground#c4c4c4
symbolIcon.interfaceForeground#c4c4c4
symbolIcon.keyForeground#c4c4c4
symbolIcon.keywordForeground#c4c4c4
symbolIcon.methodForeground#c4c4c4
symbolIcon.moduleForeground#dedede
symbolIcon.namespaceForeground#c4c4c4
symbolIcon.nullForeground#c4c4c4
symbolIcon.numberForeground#c4c4c4
symbolIcon.objectForeground#c4c4c4
symbolIcon.operatorForeground#c4c4c4
symbolIcon.packageForeground#dedede
symbolIcon.propertyForeground#c4c4c4
symbolIcon.referenceForeground#c4c4c4
symbolIcon.snippetForeground#dedede
symbolIcon.stringForeground#c4c4c4
symbolIcon.structForeground#c4c4c4
symbolIcon.textForeground#c4c4c4
symbolIcon.typeParameterForeground#c4c4c4
symbolIcon.unitForeground#c4c4c4
symbolIcon.variableForeground#c4c4c4
tab.activeBackground#1a1a1a
tab.activeBorder#c4c4c4
tab.activeBorderTop#474747
tab.activeForeground#c4c4c4
tab.border#474747
tab.hoverBackground#818181
tab.hoverBorder#000000
tab.hoverForeground#000000
tab.inactiveBackground#000000
tab.inactiveForeground#818181
terminal.ansiBlack#332500
terminal.ansiBlue#003fff
terminal.ansiBrightBlack#664b00
terminal.ansiBrightBlue#003fff
terminal.ansiBrightCyan#008888
terminal.ansiBrightGreen#c4c4c4
terminal.ansiBrightMagenta#880088
terminal.ansiBrightRed#5c5c5c
terminal.ansiBrightWhite#dedede
terminal.ansiBrightYellow#888800
terminal.ansiCyan#008888
terminal.ansiGreen#666666
terminal.ansiMagenta#880088
terminal.ansiRed#5c5c5c
terminal.ansiWhite#ffedbd
terminal.ansiYellow#cccc00
terminal.background#080808
terminal.border#8a6500
terminal.foreground#666666
terminal.selectionBackground#332500
terminalCursor.background#000000
terminalCursor.foreground#c4c4c4
textLink.foreground#818181
titleBar.activeBackground#1a1a1a
titleBar.activeForeground#c4c4c4
titleBar.border#474747
titleBar.inactiveBackground#1a1a1a
titleBar.inactiveForeground#818181
tree.indentGuidesStroke#c4c4c4
walkThrough.embeddedEditorBackground#00000050
widget.shadow#c4c4c4c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6E6763	italic
variable.other.constant, constant, string	#868C91	italic
constant.numeric	#B4BDC3	italic
constant.language.boolean	#B4BDC3	italic
variable.other	#979FA4
entity.name.function	#B4BDC3
keyword	#B4BDC3	bold
keyword.control.directive	#B4BDC3	bold
storage.type, storage.modifier, keyword.other.typedef	#A1938C
punctuation.definition.template-expression	#8D9499	bold
entity.name.tag	#8D9499	bold
support.type.property-name	#B4BDC3	italic

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