BBBThemes

Name: BBBThemes
Author: cmjchrisjones

Publisher: cmjchrisjonesThemes in package: 10

A selection of themes with a twist for BaldBeardedBuilder on Twitch!

GitHub

Color themes

VS Code preview

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

BBBThemes — BBBGarish

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.backgroundNULL
activityBar.border#fffb00
activityBar.dropBackgroundNULL
activityBar.foregroundNULL
activityBarBadge.backgroundNULL
activityBarBadge.foregroundNULL
badge.backgroundNULL
badge.foreground#d3f513
breadcrumb.activeSelectionForegroundNULL
breadcrumb.focusForegroundNULL
breadcrumb.foregroundNULL
breadcrumbPicker.backgroundNULL
button.background#1699f0
button.foreground#d3f513
button.hoverBackground#4b3131
contrastBorder#f84848
debugExceptionWidget.backgroundNULL
debugExceptionWidget.borderNULL
debugToolBar.backgroundNULL
diffEditor.insertedTextBackgroundNULL23
diffEditor.insertedTextBorderNULL33
diffEditor.removedTextBackgroundNULL33
diffEditor.removedTextBorderNULL4d
dropdown.background#470909
dropdown.border#ca9898
dropdown.foreground#363b79
editor.background#bdd825
editor.findMatchBackgroundNULL79
editor.findMatchHighlightBackgroundNULL5d
editor.findRangeHighlightBackgroundNULL
editor.foreground#3f461c
editor.hoverHighlightBackgroundNULL5a
editor.inactiveSelectionBackgroundNULL5a
editor.lineHighlightBackgroundNULL
editor.lineHighlightBorderNULL
editor.rangeHighlightBackgroundNULL5a
editor.selectionBackgroundNULL
editor.selectionHighlightBackgroundNULL79
editor.wordHighlightBackgroundNULL33
editor.wordHighlightStrongBackgroundNULL33
editorBracketMatch.backgroundNULL4d
editorBracketMatch.borderNULL
editorCodeLens.foregroundNULLb4
editorCursor.foregroundNULL
editorError.borderNULL
editorError.foregroundNULL
editorGroup.borderNULL
editorGroup.dropBackgroundNULL73
editorGroup.emptyBackground#078a02
editorGroupHeader.noTabsBackground#570505
editorGroupHeader.tabsBackground#3a0000
editorGroupHeader.tabsBorder#a6c010
editorGutter.addedBackgroundNULL
editorGutter.backgroundNULL
editorGutter.deletedBackgroundNULL
editorGutter.modifiedBackgroundNULL
editorHoverWidget.backgroundNULL
editorHoverWidget.borderNULL
editorIndentGuide.activeBackgroundNULL
editorIndentGuide.backgroundNULL52
editorLineNumber.activeForegroundNULL
editorLineNumber.foreground#d3f513
editorLink.activeForegroundNULL
editorMarkerNavigation.backgroundNULL
editorMarkerNavigationError.backgroundNULL
editorMarkerNavigationWarning.backgroundNULL
editorOverviewRuler.commonContentForegroundNULL
editorOverviewRuler.currentContentForegroundNULL
editorOverviewRuler.incomingContentForegroundNULL
editorRuler.foregroundNULL52
editorSuggestWidget.backgroundNULL
editorSuggestWidget.borderNULL
editorSuggestWidget.foregroundNULL
editorSuggestWidget.highlightForegroundNULL
editorSuggestWidget.selectedBackgroundNULL
editorWarning.borderNULL
editorWarning.foregroundNULL
editorWhitespace.foregroundNULL
editorWidget.backgroundNULL
editorWidget.borderNULL
errorForeground#b60a99
extensionButton.prominentBackground#5e2222
extensionButton.prominentForeground#534242
extensionButton.prominentHoverBackgroundNULL
focusBorder#4e3232
foreground#d3f513
gitDecoration.conflictingResourceForegroundNULL
gitDecoration.deletedResourceForegroundNULL90
gitDecoration.ignoredResourceForegroundNULL
gitDecoration.modifiedResourceForegroundNULL
gitDecoration.untrackedResourceForegroundNULLff
input.background#802424
input.border#110606
input.foregroundNULL
input.placeholderForeground#5f6f79
inputOption.activeBorderNULL
inputValidation.errorBackgroundNULL
inputValidation.errorBorderNULL
inputValidation.infoBackgroundNULL
inputValidation.infoBorderNULL
inputValidation.warningBackgroundNULL
inputValidation.warningBorderNULL
list.activeSelectionBackgroundNULL8c
list.activeSelectionForegroundNULL
list.dropBackgroundNULL
list.focusBackgroundNULL
list.focusForegroundNULL
list.highlightForegroundNULL
list.hoverBackgroundNULL
list.hoverForegroundNULL
list.inactiveSelectionBackgroundNULL
list.inactiveSelectionForegroundNULL
list.invalidItemForegroundNULL
merge.borderNULL
merge.currentContentBackgroundNULL
merge.currentHeaderBackgroundNULL
merge.incomingContentBackgroundNULL
merge.incomingHeaderBackgroundNULL5a
meta.objectliteral.jsNULL
notificationCenter.borderNULL
notificationLink.foregroundNULL
notifications.backgroundNULL
notifications.borderNULL
notifications.foregroundNULL
notificationToast.border#997b7b
panel.backgroundNULL
panel.borderNULL
panelTitle.activeBorderNULL
panelTitle.activeForegroundNULL
panelTitle.inactiveForegroundNULL80
peekView.borderNULL
peekViewEditor.backgroundNULL
peekViewEditor.matchHighlightBackgroundNULL5a
peekViewResult.backgroundNULL
peekViewResult.fileForegroundNULL
peekViewResult.lineForegroundNULL
peekViewResult.matchHighlightBackgroundNULL
peekViewResult.selectionBackgroundNULL
peekViewResult.selectionForegroundNULL
peekViewTitle.backgroundNULL
peekViewTitleDescription.foregroundNULL
peekViewTitleLabel.foregroundNULL
pickerGroup.borderNULL
pickerGroup.foregroundNULL
scrollbar.shadowNULL
scrollbarSlider.activeBackgroundNULL80
scrollbarSlider.backgroundNULL80
scrollbarSlider.hoverBackgroundNULL80
selection.background#0bd81c
sideBar.background#d3f513
sideBar.borderNULL
sideBar.foreground#130a63
sideBarSectionHeader.background#5a2d2d
sideBarSectionHeader.foregroundNULL
sideBarTitle.foregroundNULL
source.elmNULL
statusBar.background#d3f513
statusBar.borderNULL
statusBar.debuggingBackgroundNULL
statusBar.debuggingBorderNULL
statusBar.debuggingForegroundNULL
statusBar.foreground#d3f513
statusBar.noFolderBackgroundNULL
statusBar.noFolderBorderNULL
statusBar.noFolderForegroundNULL
statusBarItem.activeBackgroundNULL
statusBarItem.hoverBackgroundNULL
statusBarItem.prominentBackgroundNULL
statusBarItem.prominentHoverBackgroundNULL
string.quoted.single.jsNULL
tab.activeBackground#333333
tab.activeBorderNULL
tab.activeForeground#ffee00
tab.border#FFF
tab.inactiveBackgroundNULL
tab.inactiveForegroundNULL
tab.unfocusedActiveBorderNULL
tab.unfocusedActiveForegroundNULL
tab.unfocusedInactiveForegroundNULL
terminal.ansiBlackNULL
terminal.ansiBlueNULL
terminal.ansiBrightBlackNULL
terminal.ansiBrightBlueNULL
terminal.ansiBrightCyanNULL
terminal.ansiBrightGreenNULL
terminal.ansiBrightMagentaNULL
terminal.ansiBrightRedNULL
terminal.ansiBrightWhiteNULL
terminal.ansiBrightYellowNULL
terminal.ansiCyanNULL
terminal.ansiGreenNULL
terminal.ansiMagentaNULL
terminal.ansiRedNULL
terminal.ansiWhite#071cd6
terminal.ansiYellowNULL
terminal.selectionBackgroundNULL4d
terminalCursor.backgroundNULL
titleBar.activeBackground#abc519
titleBar.activeForeground#d3f513
titleBar.inactiveBackground#1c2006
titleBar.inactiveForeground#988ece
walkThrough.embeddedEditorBackgroundNULL
welcomePage.buttonBackgroundNULL
welcomePage.buttonHoverBackgroundNULL
widget.shadow#3db119

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#d3f513	italic
variable, string constant.other.placeholder	#380a0a	—
constant.other.color	#0d7cd8	—
invalid, invalid.illegal	#33abb6	—
keyword, storage.type, storage.modifier	#463939	—
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	#f13838	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#272626	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#8b2222	—
meta.block variable.other	#aebe1a	—
support.other.variable, string.other.link	#866b10	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#72919e	—
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	#2a3d30	—
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	#9e5151	—
support.type	#b61f1f	—
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	#0d737c	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#26460c	—
variable.language	#d3f513	italic
entity.name.method.js	#060702	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#3b3d2d	—
entity.other.attribute-name	#c2a7a7	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#d2f315	italic
entity.other.attribute-name.class	#8b3636	—
source.sass keyword.control	#89a089	—
markup.inserted	#16240d	—
markup.deleted	#a9aeb9	—
markup.changed	#632727	—
string.regexp	#726868	—
constant.character.escape	#381919	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#584343	italic
source.js constant.other.object.key.js string.unquoted.label.js	#2d8576	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#955959	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#411212	—
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	#50555a	—
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	#a74848	—
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	#3e3e49	—
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	#c7b0b0	—
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	#070000	—
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	#105b8d	—
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	#b83030	—
text.html.markdown, punctuation.definition.list_item.markdown	#5c6323	—
text.html.markdown markup.inline.raw.markdown	#171d68	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#1b2f31	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#6e4949	—
markup.italic	#8b1c66	italic
markup.bold, markup.bold string	#e021e0	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	#0c3c95	bold
markup.underline	#522626	underline
markup.quote punctuation.definition.blockquote.markdown	#330808	—
markup.quote	—	italic
string.other.link.title.markdown	#223d16	—
string.other.link.description.title.markdown	#110e0e	—
constant.other.reference.link.markdown	#1b2324	—
markup.raw.block	#4b1138	—
markup.raw.block.fenced.markdown	#555555	—
punctuation.definition.fenced.markdown	#546741	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#290d0d	—
variable.language.fenced.markdown	#798463	—
meta.separator	#123444	bold
markup.table	#F76F76	—

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