VSBBC

Name: VSBBC
Author: aichelberg2

Publisher: aichelberg2Themes in package: 1

Visual Studio Big Black Code

GitHub

VS Code preview

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

VSBBC — VSBBC

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#000000
activityBar.activeBorder#b6b6b6
activityBar.activeFocusBorder#b6b6b6
activityBar.background#1e1e1e
activityBar.border#363636
activityBar.dropBorder#000000
activityBar.foreground#d1d1d1
activityBar.inactiveForeground#b6b6b6a3
activityBarBadge.background#0f0f0f
activityBarBadge.foreground#d1d1d1
badge.background#0f0f0f
badge.foreground#b6b6b6
breadcrumb.activeSelectionForeground#d1d1d1
breadcrumb.background#0f0f0f
breadcrumb.focusForeground#d1d1d1
breadcrumb.foreground#b6b6b6
breadcrumbPicker.background#0f0f0f
button.background#4b4b4b
button.border#4d4d4d
button.foreground#ffffff
button.hoverBackground#626262
button.secondaryBackground#262626
button.secondaryForeground#d1d1d1
button.secondaryHoverBackground#414141
checkbox.background#000000
checkbox.border#545454
checkbox.foreground#ffffff
contrastActiveBorder#00000000
contrastBorder#363636
debugConsole.errorForeground#9e3030
debugConsole.infoForeground#b6b6b6
debugConsole.sourceForeground#d1d1d1
debugConsole.warningForeground#c9c61d
debugConsoleInputIcon.foreground#545454
debugIcon.breakpointCurrentStackframeForeground#9b9b9b
debugIcon.breakpointDisabledForeground#b4b4b4
debugIcon.breakpointForeground#ffffff
debugIcon.breakpointStackframeForeground#9b9b9b
debugIcon.breakpointUnverifiedForeground#b4b4b4
debugIcon.continueForeground#d1d1d1
debugIcon.disconnectForeground#d1d1d1
debugIcon.pauseForeground#d1d1d1
debugIcon.restartForeground#d1d1d1
debugIcon.startForeground#d1d1d1
debugIcon.stepBackForeground#d1d1d1
debugIcon.stepIntoForeground#d1d1d1
debugIcon.stepOutForeground#d1d1d1
debugIcon.stepOverForeground#d1d1d1
debugIcon.stopForeground#d1d1d1
debugTokenExpression.boolean#dedede
debugTokenExpression.error#bf0505
debugTokenExpression.name#a1a1a1
debugTokenExpression.number#dedede
debugTokenExpression.string#d1d1d1
debugTokenExpression.value#d1d1d1
debugToolBar.background#0f0f0f
debugView.exceptionLabelBackground#0f0f0f
debugView.exceptionLabelForeground#bd0000
debugView.stateLabelBackground#0f0f0f
debugView.stateLabelForeground#b6b6b6
descriptionForeground#a1a1a1
diffEditor.border#363636
dropdown.background#0f0f0f
dropdown.border#363636
dropdown.foreground#b6b6b6
dropdown.listBackground#0f0f0f
editor.background#000000
editor.findMatchBackground#515151
editor.findMatchBorder#ffffff00
editor.findMatchHighlightBackground#393939
editor.findMatchHighlightBorder#ffffff00
editor.foldBackground#0f0f0f
editor.foreground#b6b6b6
editor.hoverHighlightBackground#ffffff23
editor.inactiveSelectionBackground#ffffff3a
editor.lineHighlightBackground#0f0f0f
editor.lineHighlightBorder#414141
editor.rangeHighlightBackground#ffffff3b
editor.rangeHighlightBorder#8a8a8a
editor.selectionBackground#ffffff47
editor.selectionHighlightBackground#ffffff1f
editor.selectionHighlightBorder#ff000000
editor.wordHighlightBackground#ffffff32
editor.wordHighlightBorder#ff000000
editor.wordHighlightStrongBackground#ffffff32
editor.wordHighlightStrongBorder#ff000000
editorCodeLens.foreground#878787
editorCursor.foreground#d1d1d1
editorError.background#ff000067
editorError.border#ff000000
editorError.foreground#ff000000
editorGroup.border#363636
editorGroup.dropBackground#ffffff23
editorGroup.emptyBackground#ffffff10
editorGroupHeader.border#363636
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#363636
editorGutter.addedBackground#ffffff92
editorGutter.background#0f0f0f
editorGutter.commentGlyphForeground#b0b0b0
editorGutter.commentRangeForeground#363636
editorGutter.commentUnresolvedGlyphForeground#b0b0b0
editorGutter.deletedBackground#ff0000aa
editorGutter.foldingControlForeground#d1d1d1
editorGutter.modifiedBackground#ffffff92
editorHoverWidget.background#0f0f0f
editorHoverWidget.border#363636
editorHoverWidget.foreground#b6b6b6
editorHoverWidget.highlightForeground#ffffffdc
editorHoverWidget.statusBarBackground#ffffff09
editorIndentGuide.activeBackground#b6b6b6b5
editorIndentGuide.background#212121
editorLightBulb.foreground#d1d1d1
editorLightBulbAutoFix.foreground#d1d1d1
editorLineNumber.activeForeground#d1d1d1
editorLineNumber.foreground#777777
editorLink.activeForeground#858585
editorOverviewRuler.border#363636
editorSuggestWidget.background#0f0f0f
editorSuggestWidget.border#363636
editorSuggestWidget.focusHighlightForeground#888888
editorSuggestWidget.foreground#bebebe
editorSuggestWidget.highlightForeground#6c6c6c
editorSuggestWidget.selectedBackground#1b1b1b
editorSuggestWidget.selectedForeground#ffffff
editorSuggestWidget.selectedIconForeground#ffffff
editorUnnecessaryCode.opacity#ff00009e
editorWarning.background#ffe10067
editorWarning.border#ff000000
editorWarning.foreground#ff000000
editorWhitespace.foreground#ffffff73
editorWidget.background#1b1b1b
editorWidget.border#363636
editorWidget.foreground#b6b6b6
editorWidget.resizeBorder#d1d1d1
errorForeground#b6b6b6
extensionButton.prominentBackground#4b4b4b
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#626262
extensionIcon.preReleaseForeground#d1d1d1
extensionIcon.starForeground#d1d1d1
extensionIcon.verifiedForeground#d1d1d1
focusBorder#4b4b4b
foreground#d1d1d1
gitDecoration.addedResourceForeground#1eff00b8
gitDecoration.conflictingResourceForeground#ff7700
gitDecoration.deletedResourceForeground#ff0000
gitDecoration.ignoredResourceForeground#757575
gitDecoration.modifiedResourceForeground#fdff88
gitDecoration.renamedResourceForeground#d1d1d1
gitDecoration.stageDeletedResourceForeground#ff0000
gitDecoration.stageModifiedResourceForeground#fdff88
icon.foreground#d1d1d1
input.background#0f0f0f
input.border#363636
input.foreground#b6b6b6
input.placeholderForeground#b6b6b685
inputOption.activeBackground#ffffff2b
inputOption.activeBorder#ff000000
inputOption.activeForeground#d1d1d1
inputOption.hoverBackground#1e1e1e
keybindingLabel.background#4b4b4b
keybindingLabel.border#4d4d4d
keybindingLabel.bottomBorder#4d4d4d
keybindingLabel.foreground#ffffff
keybindingTable.headerBackground#0f0f0f
keybindingTable.rowsBackground#0f0f0f
list.activeSelectionBackground#1e1e1e
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.filterMatchBackground#ff000067
list.filterMatchBorder#ff000000
list.focusBackground#1e1e1e
list.focusForeground#ffffff
list.focusHighlightForeground#ffffff
list.focusOutline#262626
list.highlightForeground#d1d1d1
list.hoverBackground#0f0f0f
list.hoverForeground#ffffff
list.inactiveFocusBackground#323232
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#1e1e1e
list.inactiveSelectionForeground#ffffff
list.inactiveSelectionIconForeground#d1d1d1
listFilterWidget.background#1e1e1e
listFilterWidget.noMatchesOutline#d1d1d1
listFilterWidget.outline#363636
menu.background#0f0f0f
menu.border#363636
menu.foreground#d1d1d1
menu.selectionBackground#1e1e1e
menu.selectionBorder#262626
menu.selectionForeground#ffffff
menu.separatorBackground#363636
menubar.selectionBackground#0f0f0f
menubar.selectionForeground#d1d1d1
minimap.background#00000000
minimap.errorHighlight#ff0000ba
minimap.warningHighlight#ffe100a2
notificationCenter.border#363636
notificationCenterHeader.background#0f0f0f
notificationCenterHeader.foreground#d1d1d1
notificationLink.foreground#858585
notifications.background#0f0f0f
notifications.border#363636
notifications.foreground#d1d1d1
notificationsErrorIcon.foreground#777777
notificationsInfoIcon.foreground#777777
notificationsWarningIcon.foreground#777777
notificationToast.border#363636
panel.background#000000
panel.border#363636
panelTitle.activeBorder#777777
panelTitle.activeForeground#d1d1d1
panelTitle.inactiveForeground#b6b6b685
peekView.border#777777
peekViewEditor.background#0f0f0f
peekViewEditor.matchHighlightBackground#ffffff40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1e1e1e
peekViewResult.background#1e1e1e
peekViewResult.fileForeground#b6b6b6b6
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#0f0f0f
peekViewTitleDescription.foreground#d1d1d1
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#363636
pickerGroup.foreground#d1d1d1
problemsErrorIcon.foreground#d1d1d1
problemsInfoIcon.foreground#d1d1d1
problemsWarningIcon.foreground#d1d1d1
progressBar.background#d1d1d1
quickInput.background#0f0f0f
quickInput.foreground#d1d1d1
quickInputList.focusBackground#1e1e1e
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#ffffff
sash.hoverBorder#363636
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#ffffff50
scrollbarSlider.background#ffffff20
scrollbarSlider.hoverBackground#ffffff38
selection.background#ffffff3b
settings.modifiedItemIndicator#d1d1d1
sideBar.background#000000
sideBar.border#363636
sideBar.foreground#d1d1d1
sideBarSectionHeader.background#0f0f0f
sideBarSectionHeader.border#0f0f0f
sideBarSectionHeader.foreground#d1d1d1
sideBarTitle.foreground#d1d1d1
sideBySideEditor.horizontalBorder#363636
sideBySideEditor.verticalBorder#363636
statusBar.background#0f0f0f
statusBar.border#363636
statusBar.debuggingBackground#b6b6b6
statusBar.debuggingBorder#363636
statusBar.debuggingForeground#000000
statusBar.focusBorder#363636
statusBar.foreground#d1d1d1
statusBar.noFolderBackground#0f0f0f
statusBar.noFolderBorder#363636
statusBar.noFolderForeground#d1d1d1
statusBarItem.activeBackground#ffffff65
statusBarItem.hoverBackground#ffffff30
statusBarItem.remoteBackground#0f0f0f
statusBarItem.remoteForeground#d1d1d1
symbolIcon.arrayForeground#d1d1d1
symbolIcon.booleanForeground#d1d1d1
symbolIcon.classForeground#d1d1d1
symbolIcon.colorForeground#d1d1d1
symbolIcon.constantForeground#d1d1d1
symbolIcon.constructorForeground#d1d1d1
symbolIcon.enumeratorForeground#d1d1d1
symbolIcon.enumeratorMemberForeground#d1d1d1
symbolIcon.eventForeground#d1d1d1
symbolIcon.fieldForeground#d1d1d1
symbolIcon.fileForeground#d1d1d1
symbolIcon.folderForeground#d1d1d1
symbolIcon.functionForeground#d1d1d1
symbolIcon.interfaceForeground#d1d1d1
symbolIcon.keyForeground#d1d1d1
symbolIcon.keywordForeground#d1d1d1
symbolIcon.methodForeground#d1d1d1
symbolIcon.moduleForeground#d1d1d1
symbolIcon.namespaceForeground#d1d1d1
symbolIcon.nullForeground#d1d1d1
symbolIcon.numberForeground#d1d1d1
symbolIcon.objectForeground#d1d1d1
symbolIcon.operatorForeground#d1d1d1
symbolIcon.packageForeground#d1d1d1
symbolIcon.propertyForeground#d1d1d1
symbolIcon.referenceForeground#d1d1d1
symbolIcon.snippetForeground#d1d1d1
symbolIcon.stringForeground#d1d1d1
symbolIcon.structForeground#d1d1d1
symbolIcon.textForeground#d1d1d1
symbolIcon.typeParameterForeground#d1d1d1
symbolIcon.unitForeground#d1d1d1
symbolIcon.variableForeground#d1d1d1
tab.activeBackground#0f0f0f
tab.activeBorder#0f0f0f
tab.activeBorderTop#363636
tab.activeForeground#d1d1d1
tab.activeModifiedBorder#363636
tab.border#363636
tab.hoverBackground#1e1e1e
tab.hoverBorder#0f0f0f
tab.hoverForeground#ffffff
tab.inactiveBackground#000000
tab.inactiveForeground#b6b6b6b6
tab.inactiveModifiedBorder#363636
tab.lastPinnedBorder#363636
tab.unfocusedActiveBackground#0f0f0f
tab.unfocusedActiveBorder#0f0f0f
tab.unfocusedActiveBorderTop#363636
tab.unfocusedActiveForeground#d1d1d1
tab.unfocusedActiveModifiedBorder#363636
tab.unfocusedHoverBackground#1e1e1e
tab.unfocusedHoverBorder#0f0f0f
tab.unfocusedHoverForeground#ffffff
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#b6b6b6b6
tab.unfocusedInactiveModifiedBorder#363636
textLink.activeForeground#d1d1d1
textLink.foreground#858585
titleBar.activeBackground#000000
titleBar.activeForeground#d1d1d1
titleBar.border#363636
titleBar.inactiveBackground#1e1e1e
titleBar.inactiveForeground#d1d1d1
toolbar.activeBackground#1e1e1e
toolbar.hoverBackground#363636
toolbar.hoverOutline#ffffff00
tree.indentGuidesStroke#363636
welcomePage.background#000000
welcomePage.progress.background#282828
welcomePage.progress.foreground#b6b6b6
welcomePage.tileBackground#0f0f0f
welcomePage.tileHoverBackground#1e1e1e
widget.shadow#00000000
window.activeBorder#363636
window.inactiveBorder#ffffff55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#EEEEEE	italic
variable, string constant.other.placeholder	#EEEEEE	—
constant.other.color	#969696	—
invalid, invalid.illegal	#FF0000	—
keyword, storage.type, storage.modifier	#969696	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#969696	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ebebeb	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#5F8787	—
meta.block variable.other	#EEEEEE	—
support.other.variable, string.other.link	#EEEEEE	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#EEEEEE	—
string, constant.other.symbol, 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	#EEEEEE	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#969696	—
support.type	#EEEEEE	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#EEEEEE	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#EEEEEE	—
variable.language	#EEEEEE	italic
entity.name.method.js	#EEEEEE	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#EEEEEE	—
entity.other.attribute-name	#969696	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#969696	italic
entity.other.attribute-name.class	#969696	—
source.sass keyword.control	#969696	—
string.regexp	#EEEEEE	—
constant.character.escape	#D2D2D2	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#EEEEEE	italic
source.js constant.other.object.key.js string.unquoted.label.js	#EEEEEE	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#EEEEEE	—
token.info-token	#EEEEEE	—
token.warn-token	#FFFA00	—
token.error-token	#FF0000	—
token.debug-token	#FF0000	—
string, punctuation.definition.string	#b3b3b3
comment, punctuation.definition.comment	#4e4e4e

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