JoshBurnsXYZ VS Code Theme

Name: JoshBurnsXYZ VS Code Theme
Author: Josh Burns

Publisher: Josh BurnsThemes in package: 2

My personal VSCode theme

GitHub

Color themes

VS Code preview

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

JoshBurnsXYZ VS Code Theme — JoshBurnsXYZ Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#dcdcdd33
activityBar.activeBorder#35393b
activityBar.activeFocusBorder#5073b8
activityBar.background#fdfdfd
activityBar.border#fdfdfd
activityBar.dropBorder#1299ad
activityBar.foreground#57595c
activityBar.inactiveForeground#787a7c
activityBarBadge.background#5073b8
activityBarBadge.foreground#fdfdfd
badge.background#5073b8
badge.foreground#fdfdfd
breadcrumb.activeSelectionForeground#14181b
breadcrumb.background#fdfdfd
breadcrumb.focusForeground#35393b
breadcrumb.foreground#57595c
breadcrumbPicker.background#fdfdfd
button.background#1299ad
button.foreground#fdfdfd
button.hoverBackground#09b399
button.secondaryBackground#35393b
button.secondaryForeground#fdfdfd
button.secondaryHoverBackground#57595c
charts.blue#1299ad
charts.foreground#35393b
charts.green#6ebb82
charts.lines#999b9c
charts.orange#f37055
charts.purple#5073b8
charts.red#ef4e7c
charts.yellow#f79532
checkbox.background#1299ad
checkbox.border#dcdcdd
checkbox.foreground#fdfdfd
debugConsole.errorForeground#ef4e7c
debugConsole.infoForeground#1299ad
debugConsole.sourceForeground#5073b8
debugConsole.warningForeground#f37055
debugConsoleInputIcon.foreground#787a7c
debugExceptionWidget.background#dcdcdd
debugExceptionWidget.border#dcdcdd
debugIcon.breakpointCurrentStackframeForeground#6ebb82
debugIcon.breakpointDisabledForeground#787a7c
debugIcon.breakpointForeground#ef4e7c
debugIcon.breakpointStackframeForeground#f79532
debugIcon.breakpointUnverifiedForeground#57595c
debugIcon.continueForeground#6ebb82
debugIcon.disconnectForeground#f37055
debugIcon.pauseForeground#1299ad
debugIcon.restartForeground#ae7bb7
debugIcon.startForeground#6ebb82
debugIcon.stepBackForeground#14181b
debugIcon.stepIntoForeground#14181b
debugIcon.stepOutForeground#14181b
debugIcon.stepOverForeground#14181b
debugIcon.stopForeground#ef4e7c
debugTokenExpression.boolean#5073b8
debugTokenExpression.error#ef4e7c
debugTokenExpression.name#1299ad
debugTokenExpression.number#ae7bb7
debugTokenExpression.string#6ebb82
debugTokenExpression.value#14181b
debugToolBar.background#dcdcdd
debugToolBar.border#babcbc
debugView.exceptionLabelBackground#dcdcdd
debugView.exceptionLabelForeground#f79532
debugView.stateLabelBackground#dcdcdd
debugView.stateLabelForeground#1299ad
debugView.valueChangedHighlight#f7953233
descriptionForeground#35393b
diffEditor.border#dcdcdd
diffEditor.diagonalFill#dcdcdd7f
diffEditor.insertedTextBackground#6ebb8220
diffEditor.removedTextBackground#ef4e7c20
dropdown.background#dcdcdd
dropdown.border#dcdcdd
dropdown.foreground#35393b
dropdown.listBackground#dcdcdd
editor.background#fdfdfd
editor.findMatchBackground#f795323f
editor.findMatchHighlightBackground#f7953233
editor.findRangeHighlightBackground#dcdcdd
editor.focusedStackFrameHighlightBackground#6ebb823f
editor.foldBackground#dcdcdd66
editor.foreground#14181b
editor.hoverHighlightBackground#babcbc7f
editor.inactiveSelectionBackground#1299ad33
editor.lineHighlightBackground#fdfdfd
editor.lineHighlightBorder#dcdcdd
editor.rangeHighlightBackground#f7953233
editor.selectionBackground#1299ad33
editor.selectionForeground#14181b
editor.selectionHighlightBackground#dcdcdd
editor.snippetFinalTabstopHighlightBackground#babcbc7f
editor.snippetTabstopHighlightBackground#dcdcdd7f
editor.stackFrameHighlightBackground#09b3993f
editor.symbolHighlightBackground#5073b833
editor.wordHighlightBackground#5073b833
editor.wordHighlightStrongBackground#ae7bb733
editorBracketMatch.background#dcdcdd
editorBracketMatch.border#babcbc
editorCodeLens.foreground#57595c
editorCursor.background#fdfdfd
editorCursor.foreground#5073b8
editorError.border#14181b
editorError.foreground#ef4e7c
editorGroup.border#dcdcdd
editorGroup.dropBackground#babcbc7f
editorGroup.emptyBackground#fdfdfd
editorGroup.focusedEmptyBorder#dcdcdd
editorGroupHeader.border#fdfdfd
editorGroupHeader.noTabsBackground#fdfdfd
editorGroupHeader.tabsBackground#fdfdfd
editorGroupHeader.tabsBorder#fdfdfd
editorGutter.addedBackground#6ebb82
editorGutter.background#fdfdfd
editorGutter.commentRangeForeground#999b9c
editorGutter.deletedBackground#ef4e7c
editorGutter.foldingControlForeground#57595c
editorGutter.modifiedBackground#f79532
editorHint.border#787a7c
editorHint.foreground#ae7bb7
editorHoverWidget.background#dcdcdd
editorHoverWidget.border#dcdcdd
editorHoverWidget.foreground#35393b
editorHoverWidget.statusBarBackground#1299ad33
editorIndentGuide.activeBackground#babcbc
editorIndentGuide.background#dcdcdd
editorInfo.border#57595c
editorInfo.foreground#1299ad
editorLightBulb.foreground#f79532
editorLightBulbAutoFix.foreground#1299ad
editorLineNumber.activeForeground#787a7c
editorLineNumber.foreground#babcbc
editorLink.activeForeground#09b399
editorMarkerNavigation.background#dcdcdd
editorMarkerNavigationError.background#ef4e7c
editorMarkerNavigationInfo.background#1299ad
editorMarkerNavigationWarning.background#f37055
editorOverviewRuler.addedForeground#6ebb827f
editorOverviewRuler.border#dcdcdd
editorOverviewRuler.bracketMatchForeground#999b9c
editorOverviewRuler.commonContentForeground#5073b8
editorOverviewRuler.currentContentForeground#09b399
editorOverviewRuler.deletedForeground#ef4e7c7f
editorOverviewRuler.errorForeground#ef4e7c7f
editorOverviewRuler.findMatchForeground#f79532bf
editorOverviewRuler.incomingContentForeground#1299ad
editorOverviewRuler.infoForeground#1299ad7f
editorOverviewRuler.modifiedForeground#f795327f
editorOverviewRuler.rangeHighlightForeground#babcbcbf
editorOverviewRuler.selectionHighlightForeground#dcdcddbf
editorOverviewRuler.warningForeground#f370557f
editorOverviewRuler.wordHighlightForeground#babcbcbf
editorOverviewRuler.wordHighlightStrongForeground#999b9cbf
editorPane.background#fdfdfd
editorRuler.foreground#dcdcdd
editorSuggestWidget.background#dcdcdd
editorSuggestWidget.border#dcdcdd
editorSuggestWidget.foreground#35393b
editorSuggestWidget.highlightForeground#ae7bb7
editorSuggestWidget.selectedBackground#babcbc
editorUnnecessaryCode.opacity#0000007f
editorWarning.border#35393b
editorWarning.foreground#f37055
editorWhitespace.foreground#dcdcdd
editorWidget.background#dcdcdd
editorWidget.border#dcdcdd
editorWidget.foreground#35393b
editorWidget.resizeBorder#1299ad
errorForeground#ef4e7c
extensionBadge.remoteBackground#ae7bb7
extensionBadge.remoteForeground#fdfdfd
extensionButton.prominentBackground#1299ad
extensionButton.prominentForeground#fdfdfd
extensionButton.prominentHoverBackground#09b399
focusBorder#5073b8
foreground#14181b
gitDecoration.addedResourceForeground#6ebb82
gitDecoration.conflictingResourceForeground#09b399
gitDecoration.deletedResourceForeground#ef4e7c
gitDecoration.ignoredResourceForeground#999b9c
gitDecoration.modifiedResourceForeground#f79532
gitDecoration.stageDeletedResourceForeground#ef4e7c
gitDecoration.stageModifiedResourceForeground#09b399
gitDecoration.submoduleResourceForeground#ae7bb7
gitDecoration.untrackedResourceForeground#5073b8
icon.foreground#35393b
imagePreview.border#dcdcdd
input.background#dcdcdd
input.border#dcdcdd
input.foreground#35393b
input.placeholderForeground#babcbc
inputOption.activeBackground#babcbc
inputOption.activeBorder#09b399
inputOption.activeForeground#14181b
inputValidation.errorBackground#dcdcdd
inputValidation.errorBorder#ef4e7c
inputValidation.errorForeground#ef4e7c
inputValidation.infoBackground#dcdcdd
inputValidation.infoBorder#1299ad
inputValidation.infoForeground#1299ad
inputValidation.warningBackground#dcdcdd
inputValidation.warningBorder#f37055
inputValidation.warningForeground#f37055
list.activeSelectionBackground#5073b833
list.activeSelectionForeground#14181b
list.deemphasizedForeground#787a7c
list.dropBackground#dcdcdd
list.errorForeground#ef4e7c
list.filterMatchBackground#f7953233
list.filterMatchBorder#f7953233
list.focusBackground#999b9c3f
list.focusForeground#14181b
list.highlightForeground#f79532
list.hoverBackground#dcdcdd33
list.hoverForeground#14181b
list.inactiveFocusBackground#dcdcdd3f
list.inactiveSelectionBackground#babcbc3f
list.inactiveSelectionForeground#35393b
list.invalidItemForeground#ef4e7c
list.warningForeground#f79532
listFilterWidget.background#dcdcdd
listFilterWidget.noMatchesOutline#ef4e7c
listFilterWidget.outline#1299ad
menu.background#fdfdfd
menu.foreground#35393b
menu.selectionBackground#dcdcdd
menu.selectionForeground#14181b
menu.separatorBackground#babcbc
menubar.selectionBackground#dcdcdd
menubar.selectionForeground#14181b
merge.border#787a7c
merge.commonContentBackground#5073b84c
merge.commonHeaderBackground#5073b84c
merge.currentContentBackground#09b3994c
merge.currentHeaderBackground#09b3994c
merge.incomingContentBackground#1299ad4c
merge.incomingHeaderBackground#1299ad4c
minimap.background#fdfdfd
minimap.errorHighlight#ef4e7c80
minimap.findMatchHighlight#f79532
minimap.selectionHighlight#1299ad80
minimap.warningHighlight#f3705580
minimapGutter.addedBackground#6ebb8280
minimapGutter.deletedBackground#ef4e7c80
minimapGutter.modifiedBackground#f7953280
minimapSlider.activeBackground#999b9c33
minimapSlider.background#dcdcdd33
minimapSlider.hoverBackground#babcbc33
notebook.cellBorderColor#dcdcdd3f
notebook.cellHoverBackground#dcdcdd3f
notebook.cellInsertionIndicator#6ebb82
notebook.cellStatusBarItemHoverBackground#dcdcdd3f
notebook.cellToolbarSeparator#dcdcdd3f
notebook.focusedCellBackground#dcdcdd7f
notebook.focusedCellBorder#5073b8
notebook.focusedCellShadow#0000003f
notebook.focusedEditorBorder#dcdcdd
notebook.focusedRowBorder#5073b8
notebook.inactiveFocusedCellBorder#57595c
notebook.outputContainerBackgroundColor#fdfdfd
notebook.rowHoverBackground#dcdcdd7f
notebook.selectedCellBorder#787a7c
notebook.symbolHighlightBackground#5073b83f
notebookScrollbarSlider.activeBackground#57595c7f
notebookScrollbarSlider.background#999b9c7f
notebookScrollbarSlider.hoverBackground#787a7c7f
notebookStatusErrorIcon.foreground#ef4e7c
notebookStatusRunningIcon.foreground#1299ad
notebookStatusSuccessIcon.foreground#6ebb82
notificationCenterHeader.background#babcbc
notificationCenterHeader.foreground#35393b
notificationLink.foreground#1299ad
notifications.background#dcdcdd
notifications.border#999b9c
notifications.foreground#14181b
notificationsErrorIcon.foreground#ef4e7c
notificationsInfoIcon.foreground#1299ad
notificationsWarningIcon.foreground#f37055
notificationToast.border#999b9c
panel.background#fdfdfd
panel.border#dcdcdd
panel.dropBorder#1299ad
panelSection.border#dcdcdd
panelSection.dropBackground#dcdcdd3f
panelSectionHeader.background#babcbc
panelSectionHeader.border#fdfdfd
panelSectionHeader.foreground#35393b
panelTitle.activeBorder#999b9c
panelTitle.activeForeground#35393b
panelTitle.inactiveForeground#787a7c
peekView.border#ae7bb7
peekViewEditor.background#dcdcdd7f
peekViewEditor.matchHighlightBackground#f795327f
peekViewEditorGutter.background#dcdcdd7f
peekViewResult.background#dcdcdd
peekViewResult.fileForeground#35393b
peekViewResult.lineForeground#babcbc
peekViewResult.matchHighlightBackground#f79532
peekViewResult.selectionBackground#999b9c
peekViewResult.selectionForeground#14181b
peekViewTitle.background#dcdcdd
peekViewTitleDescription.foreground#57595c
peekViewTitleLabel.foreground#14181b
pickerGroup.border#babcbc
pickerGroup.foreground#787a7c
problemsErrorIcon.foreground#ef4e7c
problemsInfoIcon.foreground#1299ad
problemsWarningIcon.foreground#f37055
progressBar.background#6ebb82
quickInput.background#dcdcdd
quickInput.foreground#14181b
quickInputTitle.background#babcbc
sash.hoverBorder#1299ad
scm.providerBorder#babcbc
scrollbar.shadow#14181b66
scrollbarSlider.activeBackground#57595c7f
scrollbarSlider.background#999b9c7f
scrollbarSlider.hoverBackground#787a7c7f
selection.background#babcbc
settings.checkboxBackground#1299ad
settings.checkboxBorder#1299ad
settings.checkboxForeground#fdfdfd
settings.dropdownBackground#dcdcdd
settings.dropdownForeground#35393b
settings.dropdownListBorder#babcbc
settings.focusedRowBackground#fdfdfd
settings.headerForeground#14181b
settings.modifiedItemIndicator#09b399
settings.numberInputBackground#dcdcdd
settings.numberInputForeground#35393b
settings.textInputBackground#dcdcdd
settings.textInputForeground#35393b
sideBar.background#fdfdfd
sideBar.border#dcdcdd
sideBar.dropBackground#dcdcdd3f
sideBar.foreground#35393b
sideBarSectionHeader.background#babcbc
sideBarSectionHeader.border#fdfdfd
sideBarSectionHeader.foreground#35393b
sideBarTitle.foreground#57595c
statusBar.background#1299ad
statusBar.border#fdfdfd
statusBar.debuggingBackground#f37055
statusBar.debuggingBorder#fdfdfd
statusBar.debuggingForeground#fdfdfd
statusBar.foreground#fdfdfd
statusBar.noFolderBackground#5073b8
statusBar.noFolderBorder#fdfdfd
statusBar.noFolderForeground#fdfdfd
statusBarItem.activeBackground#09b399
statusBarItem.errorBackground#ef4e7c
statusBarItem.errorForeground#fdfdfd
statusBarItem.hoverBackground#6ebb82
statusBarItem.prominentBackground#09b399
statusBarItem.prominentHoverBackground#6ebb82
statusBarItem.remoteBackground#09b399
statusBarItem.remoteForeground#fdfdfd
symbolIcon.arrayForeground#ae7bb7
symbolIcon.booleanForeground#5073b8
symbolIcon.classForeground#1299ad
symbolIcon.colorForeground#09b399
symbolIcon.constantForeground#6ebb82
symbolIcon.constructorForeground#5073b8
symbolIcon.enumeratorForeground#09b399
symbolIcon.enumeratorMemberForeground#1299ad
symbolIcon.eventForeground#f37055
symbolIcon.fieldForeground#ef4e7c
symbolIcon.fileForeground#35393b
symbolIcon.folderForeground#57595c
symbolIcon.functionForeground#5073b8
symbolIcon.interfaceForeground#ef4e7c
symbolIcon.keyForeground#f79532
symbolIcon.keywordForeground#1299ad
symbolIcon.methodForeground#09b399
symbolIcon.moduleForeground#09b399
symbolIcon.namespaceForeground#1299ad
symbolIcon.nullForeground#ef4e7c
symbolIcon.numberForeground#f37055
symbolIcon.objectForeground#14181b
symbolIcon.operatorForeground#ef4e7c
symbolIcon.packageForeground#f37055
symbolIcon.propertyForeground#09b399
symbolIcon.referenceForeground#f37055
symbolIcon.snippetForeground#57595c
symbolIcon.stringForeground#6ebb82
symbolIcon.structForeground#1299ad
symbolIcon.textForeground#14181b
symbolIcon.typeParameterForeground#1299ad
symbolIcon.unitForeground#f79532
symbolIcon.variableForeground#f37055
tab.activeBackground#fdfdfd
tab.activeForeground#35393b
tab.activeModifiedBorder#f79532
tab.border#fdfdfd
tab.hoverBackground#dcdcdd80
tab.hoverForeground#57595c
tab.inactiveBackground#dcdcdd
tab.inactiveForeground#999b9c
tab.inactiveModifiedBorder#f79532
tab.lastPinnedBorder#ae7bb7
tab.unfocusedActiveBackground#fdfdfd
tab.unfocusedActiveForeground#999b9c
tab.unfocusedActiveModifiedBorder#f79532
tab.unfocusedHoverBackground#dcdcdd80
tab.unfocusedHoverForeground#787a7c
tab.unfocusedInactiveBackground#dcdcdd
tab.unfocusedInactiveForeground#babcbc
tab.unfocusedInactiveModifiedBorder#f79532
terminal.ansiBlack#fdfdfd
terminal.ansiBlue#1299ad
terminal.ansiBrightBlack#dcdcdd
terminal.ansiBrightBlue#1299ad
terminal.ansiBrightCyan#09b399
terminal.ansiBrightGreen#09b399
terminal.ansiBrightMagenta#ae7bb7
terminal.ansiBrightRed#f37055
terminal.ansiBrightWhite#14181b
terminal.ansiBrightYellow#f79532
terminal.ansiCyan#09b399
terminal.ansiGreen#6ebb82
terminal.ansiMagenta#ae7bb7
terminal.ansiRed#ef4e7c
terminal.ansiWhite#35393b
terminal.ansiYellow#f79532
terminal.background#fdfdfd
terminal.foreground#35393b
terminal.selectionBackground#1299ad7f
terminalCursor.background#dcdcdd
terminalCursor.foreground#57595c
testing.iconErrored#ef4e7c
testing.iconFailed#f37055
testing.iconPassed#6ebb82
testing.iconQueued#09b399
testing.iconSkipped#787a7c
testing.iconUnset#57595c
testing.message.error.decorationForeground#ef4e7c
testing.message.error.lineBackground#ef4e7c3f
testing.message.hint.decorationForeground#ae7bb7
testing.message.hint.lineBackground#ae7bb73f
testing.message.info.decorationForeground#1299ad
testing.message.info.lineBackground#1299ad3f
testing.message.warning.decorationForeground#f37055
testing.message.warning.lineBackground#f370553f
testing.peekBorder#999b9c
testing.runAction#1299ad
textBlockQuote.background#dcdcdd
textBlockQuote.border#dcdcdd
textCodeBlock.background#fdfdfd
textLink.activeForeground#09b399
textLink.foreground#1299ad
textPreformat.foreground#f37055
textSeparator.foreground#787a7c
titleBar.activeBackground#fdfdfd
titleBar.activeForeground#57595c
titleBar.inactiveBackground#fdfdfd
titleBar.inactiveForeground#999b9c
tree.indentGuidesStroke#dcdcdd
walkThrough.embeddedEditorBackground#fdfdfd
welcomePage.background#fdfdfd
welcomePage.buttonBackground#dcdcdd
welcomePage.buttonHoverBackground#babcbc
welcomePage.progress.background#1299ad
welcomePage.progress.foreground#fdfdfd
widget.shadow#14181b66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#35393b	—
comment	#999b9c	—
constant	#ae7bb7	—
entity	#09b399	—
invalid	#ef4e7c	—
keyword	#5073b8	—
storage	#ae7bb7	—
string	#6ebb82	—
support	#09b399	—
variable	#14181b	—
markup.heading	#09b399	—
markup.deleted	#ef4e7c	—
markup.inserted	#6ebb82	—
markup.changed	#f79532	—
markup.underline	—	underline
markup.underline.link	#1299ad	—
markup.list	#14181b	—
markup.raw	#ae7bb7	—

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