OhLED Themes (142-in-1)

Name: OhLED Themes (142-in-1)
Author: Ophuscado

Publisher: OphuscadoThemes in package: 142

The OhLED Themes (142-in-1) for VSCode are inspired by the classic CRT monitors of yesteryear, specially crafted for the modern OLED displays of today.

GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_RosyBrown

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...

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#BC8F8F88
activityBar.activeBorder#BC8F8F88
activityBar.activeFocusBorder#BC8F8F88
activityBar.background#000000
activityBar.border#BC8F8F88
activityBar.dropBorder#BC8F8F88
activityBar.foreground#BC8F8F
activityBar.inactiveForeground#BC8F8F88
activityBarBadge.background#BC8F8F
activityBarBadge.foreground#000000
badge.background#000000
badge.foreground#BC8F8F
breadcrumb.activeSelectionForeground#BC8F8F
breadcrumb.background#000000
breadcrumb.focusForeground#BC8F8F
breadcrumb.foreground#BC8F8F88
breadcrumbPicker.background#000000
button.background#000000
button.foreground#BC8F8F
button.hoverBackground#BC8F8F88
checkbox.background#000000
checkbox.border#BC8F8F88
checkbox.foreground#BC8F8F
debugConsole.errorForeground#BC8F8F
debugConsole.infoForeground#BC8F8F
debugConsole.sourceForeground#BC8F8F
debugConsole.warningForeground#BC8F8F
debugConsoleInputIcon.foreground#BC8F8F
debugExceptionWidget.background#000000
debugExceptionWidget.border#BC8F8F88
debugIcon.breakpointCurrentStackframeForeground#BC8F8F
debugIcon.breakpointDisabledForeground#BC8F8F33
debugIcon.breakpointForeground#BC8F8F
debugIcon.breakpointStackframeForeground#BC8F8F
debugIcon.breakpointUnverifiedForeground#BC8F8F
debugIcon.continueForeground#BC8F8F
debugIcon.disconnectForeground#BC8F8F
debugIcon.pauseForeground#BC8F8F
debugIcon.restartForeground#BC8F8F
debugIcon.startForeground#BC8F8F
debugIcon.stepBackForeground#BC8F8F
debugIcon.stepIntoForeground#BC8F8F
debugIcon.stepOutForeground#BC8F8F
debugIcon.stepOverForeground#BC8F8F
debugIcon.stopForeground#BC8F8F
debugTokenExpression.boolean#BC8F8F
debugTokenExpression.error#BC8F8F
debugTokenExpression.name#BC8F8F
debugTokenExpression.number#BC8F8F
debugTokenExpression.string#BC8F8F
debugTokenExpression.value#BC8F8F
debugToolBar.background#000000
debugToolBar.border#BC8F8F88
debugView.exceptionLabelBackground#000000
debugView.exceptionLabelForeground#BC8F8F
debugView.stateLabelBackground#000000
debugView.stateLabelForeground#BC8F8F
debugView.valueChangedHighlight#BC8F8F88
descriptionForeground#BC8F8F
diffEditor.border#BC8F8F88
diffEditor.diagonalFill#BC8F8F11
diffEditor.insertedTextBackground#BC8F8F33
diffEditor.removedTextBackground#BC8F8F33
dropdown.background#000000
dropdown.border#BC8F8F88
dropdown.foreground#BC8F8F
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#BC8F8F88
editor.findMatchBorder#BC8F8F88
editor.findMatchHighlightBackground#000000
editor.findMatchHighlightBorder#BC8F8F88
editor.findRangeHighlightBackground#000000
editor.findRangeHighlightBorder#BC8F8F88
editor.focusedStackFrameHighlightBackground#000000
editor.foldBackground#000000
editor.foreground#BC8F8F
editor.hoverHighlightBackground#261d1dff
editor.inactiveSelectionBackground#000000
editor.lineHighlightBackground#BC8F8F11
editor.rangeHighlightBackground#000000
editor.rangeHighlightBorder#BC8F8F88
editor.selectionBackground#BC8F8F33
editor.selectionForeground#BC8F8F
editor.selectionHighlightBackground#000000
editor.selectionHighlightBorder#BC8F8F88
editor.snippetFinalTabstopHighlightBackground#000000
editor.snippetFinalTabstopHighlightBorder#BC8F8F88
editor.snippetTabstopHighlightBackground#000000
editor.snippetTabstopHighlightBorder#BC8F8F88
editor.stackFrameHighlightBackground#000000
editor.symbolHighlightBackground#BC8F8F33
editor.symbolHighlightBorder#BC8F8F88
editor.wordHighlightBackground#BC8F8F33
editor.wordHighlightBorder#BC8F8F88
editor.wordHighlightStrongBackground#BC8F8F88
editor.wordHighlightStrongBorder#BC8F8F88
editorBracketMatch.background#000000
editorBracketMatch.border#BC8F8F88
editorCodeLens.foreground#BC8F8F
editorCursor.background#000000
editorCursor.foreground#BC8F8F
editorError.border#BC8F8F88
editorError.foreground#BC8F8F
editorGroup.border#BC8F8F88
editorGroup.dropBackground#BC8F8F33
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#BC8F8F88
editorGroupHeader.border#BC8F8F88
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#BC8F8F88
editorGutter.addedBackground#BC8F8F33
editorGutter.background#000000
editorGutter.commentRangeForeground#BC8F8F33
editorGutter.deletedBackground#BC8F8F33
editorGutter.foldingControlForeground#BC8F8F88
editorGutter.modifiedBackground#BC8F8F33
editorHint.border#BC8F8F88
editorHint.foreground#BC8F8F
editorHoverWidget.background#261d1dff
editorHoverWidget.border#BC8F8F88
editorHoverWidget.foreground#BC8F8F
editorHoverWidget.statusBarBackground#BC8F8F33
editorIndentGuide.activeBackground#BC8F8F33
editorIndentGuide.background#BC8F8F11
editorInfo.border#BC8F8F88
editorInfo.foreground#BC8F8F
editorLightBulb.foreground#BC8F8F88
editorLightBulbAutoFix.foreground#BC8F8F88
editorLineNumber.activeForeground#BC8F8F
editorLineNumber.foreground#BC8F8F33
editorLink.activeForeground#BC8F8F
editorMarkerNavigation.background#BC8F8F33
editorMarkerNavigationError.background#BC8F8F33
editorMarkerNavigationInfo.background#BC8F8F33
editorMarkerNavigationWarning.background#BC8F8F33
editorOverviewRuler.addedForeground#BC8F8F33
editorOverviewRuler.background#000000
editorOverviewRuler.border#BC8F8F88
editorOverviewRuler.bracketMatchForeground#BC8F8F33
editorOverviewRuler.commonContentForeground#BC8F8F33
editorOverviewRuler.currentContentForeground#BC8F8F33
editorOverviewRuler.deletedForeground#BC8F8F33
editorOverviewRuler.errorForeground#BC8F8F88
editorOverviewRuler.findMatchForeground#BC8F8F33
editorOverviewRuler.incomingContentForeground#BC8F8F33
editorOverviewRuler.infoForeground#BC8F8F33
editorOverviewRuler.modifiedForeground#BC8F8F33
editorOverviewRuler.rangeHighlightForeground#BC8F8F33
editorOverviewRuler.selectionHighlightForeground#BC8F8F33
editorOverviewRuler.warningForeground#BC8F8F33
editorOverviewRuler.wordHighlightForeground#BC8F8F33
editorOverviewRuler.wordHighlightStrongForeground#BC8F8F33
editorPane.background#BC8F8F33
editorRuler.foreground#BC8F8F
editorSuggestWidget.background#000000
editorSuggestWidget.border#BC8F8F88
editorSuggestWidget.foreground#BC8F8F
editorSuggestWidget.highlightForeground#BC8F8F
editorSuggestWidget.selectedBackground#BC8F8F88
editorUnnecessaryCode.border#BC8F8F88
editorUnnecessaryCode.opacity#BC8F8F33
editorWarning.border#BC8F8F88
editorWarning.foreground#BC8F8F
editorWhitespace.foreground#BC8F8F33
editorWidget.background#000000
editorWidget.border#BC8F8F88
editorWidget.foreground#BC8F8F
editorWidget.resizeBorder#BC8F8F88
errorForeground#BC8F8F
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#BC8F8F
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#BC8F8F
extensionButton.prominentHoverBackground#000000
focusBorder#BC8F8F88
foreground#BC8F8F
gitDecoration.addedResourceForeground#BC8F8F
gitDecoration.conflictingResourceForeground#BC8F8F
gitDecoration.deletedResourceForeground#BC8F8F
gitDecoration.ignoredResourceForeground#BC8F8F88
gitDecoration.modifiedResourceForeground#BC8F8F
gitDecoration.submoduleResourceForeground#BC8F8F
gitDecoration.untrackedResourceForeground#BC8F8F
icon.foreground#BC8F8F
imagePreview.border#BC8F8F88
input.background#000000
input.border#BC8F8F88
input.foreground#BC8F8F
input.placeholderForeground#BC8F8F88
inputOption.activeBackground#BC8F8F33
inputOption.activeBorder#BC8F8F88
inputOption.activeForeground#BC8F8F88
inputValidation.errorBackground#000000
inputValidation.errorBorder#BC8F8F88
inputValidation.errorForeground#BC8F8F
inputValidation.infoBackground#000000
inputValidation.infoBorder#BC8F8F88
inputValidation.infoForeground#BC8F8F
inputValidation.warningBackground#000000
inputValidation.warningBorder#BC8F8F88
inputValidation.warningForeground#BC8F8F
list.activeSelectionBackground#BC8F8F
list.activeSelectionForeground#000000
list.deemphasizedForeground#BC8F8F88
list.dropBackground#BC8F8F33
list.errorForeground#BC8F8F
list.filterMatchBackground#000000
list.filterMatchBorder#BC8F8F88
list.focusBackground#BC8F8F88
list.focusForeground#BC8F8F
list.highlightForeground#BC8F8F
list.hoverBackground#BC8F8F88
list.hoverForeground#BC8F8F
list.inactiveFocusBackground#BC8F8F33
list.inactiveSelectionBackground#BC8F8F33
list.inactiveSelectionForeground#BC8F8F
list.invalidItemForeground#BC8F8F
list.warningForeground#BC8F8F
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#BC8F8F88
listFilterWidget.outline#BC8F8F
menu.background#000000
menu.border#BC8F8F88
menu.foreground#BC8F8F
menu.selectionBackground#BC8F8F88
menu.selectionBorder#BC8F8F88
menu.selectionForeground#000000
menu.separatorBackground#BC8F8F88
menubar.selectionBackground#BC8F8F33
menubar.selectionBorder#BC8F8F88
menubar.selectionForeground#BC8F8F
merge.border#BC8F8F88
merge.commonContentBackground#000000
merge.commonHeaderBackground#000000
merge.currentContentBackground#000000
merge.currentHeaderBackground#000000
merge.incomingContentBackground#000000
merge.incomingHeaderBackground#000000
minimap.background#000000
minimap.errorHighlight#BC8F8F88
minimap.findMatchHighlight#BC8F8F88
minimap.selectionHighlight#BC8F8F88
minimap.warningHighlight#BC8F8F88
minimapGutter.addedBackground#BC8F8F33
minimapGutter.deletedBackground#BC8F8F33
minimapGutter.modifiedBackground#BC8F8F33
minimapSlider.activeBackground#BC8F8F33
minimapSlider.background#BC8F8F11
minimapSlider.hoverBackground#BC8F8F11
notebook.cellBorderColor#BC8F8F88
notebook.cellStatusBarItemHoverBackground#BC8F8F11
notebook.cellToolbarSeperator#BC8F8F88
notebook.focusedCellIndicator#BC8F8F33
notebook.outputContainerBackgroundColor#000000
notebookStatusErrorIcon.foreground#ff0000
notebookStatusRunningIcon.foreground#ff0000
notebookStatusSuccessIcon.foreground#ff0000
notificationCenter.border#BC8F8F88
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#BC8F8F
notificationLink.foreground#BC8F8F
notifications.background#000000
notifications.border#BC8F8F88
notifications.foreground#BC8F8F
notificationsErrorIcon.foreground#BC8F8F
notificationsInfoIcon.foreground#BC8F8F
notificationsWarningIcon.foreground#BC8F8F
notificationToast.border#BC8F8F88
panel.background#000000
panel.border#BC8F8F88
panel.dropBorder#BC8F8F
panelInput.border#BC8F8F88
panelSection.border#BC8F8F88
panelSection.dropBackground#BC8F8F11
panelSectionHeader.background#000000
panelSectionHeader.border#BC8F8F88
panelSectionHeader.foreground#BC8F8F
panelTitle.activeBorder#BC8F8F88
panelTitle.activeForeground#BC8F8F
panelTitle.inactiveForeground#BC8F8F88
peekView.border#BC8F8F88
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#000000
peekViewEditor.matchHighlightBorder#BC8F8F88
peekViewEditorGutter.background#000000
peekViewResult.background#000000
peekViewResult.fileForeground#BC8F8F
peekViewResult.lineForeground#BC8F8F
peekViewResult.matchHighlightBackground#000000
peekViewResult.selectionBackground#000000
peekViewResult.selectionForeground#BC8F8F
peekViewTitle.background#000000
peekViewTitleDescription.foreground#BC8F8F
peekViewTitleLabel.foreground#BC8F8F
pickerGroup.border#BC8F8F88
pickerGroup.foreground#BC8F8F
problemsErrorIcon.foreground#BC8F8F
problemsInfoIcon.foreground#BC8F8F
problemsWarningIcon.foreground#BC8F8F
progressBar.background#BC8F8F88
quickInput.background#000000
quickInput.foreground#BC8F8F
quickInputTitle.background#000000
scrollbar.shadow#BC8F8F33
scrollbarSlider.activeBackground#BC8F8F33
scrollbarSlider.background#BC8F8F33
scrollbarSlider.hoverBackground#BC8F8F33
searchEditor.findMatchBackground#000000
searchEditor.findMatchBorder#BC8F8F88
searchEditor.textInputBorder#BC8F8F88
selection.background#BC8F8F88
settings.checkboxBackground#000000
settings.checkboxBorder#BC8F8F88
settings.checkboxForeground#BC8F8F
settings.dropdownBackground#000000
settings.dropdownBorder#BC8F8F88
settings.dropdownForeground#BC8F8F
settings.dropdownListBorder#BC8F8F88
settings.headerForeground#BC8F8F
settings.modifiedItemIndicator#BC8F8F88
settings.numberInputBackground#000000
settings.numberInputBorder#BC8F8F88
settings.numberInputForeground#BC8F8F
settings.textInputBackground#000000
settings.textInputBorder#BC8F8F88
settings.textInputForeground#BC8F8F
sideBar.background#000000
sideBar.border#BC8F8F88
sideBar.dropBackground#BC8F8F33
sideBar.foreground#BC8F8F
sideBarSectionHeader.background#BC8F8F33
sideBarSectionHeader.border#BC8F8F88
sideBarSectionHeader.foreground#BC8F8F
sideBarTitle.foreground#BC8F8F
statusBar.background#BC8F8F33
statusBar.border#BC8F8F88
statusBar.debuggingBackground#BC8F8F
statusBar.debuggingBorder#BC8F8F88
statusBar.debuggingForeground#000000
statusBar.foreground#BC8F8F
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#BC8F8F88
statusBar.noFolderForeground#BC8F8F
statusBarItem.activeBackground#000000
statusBarItem.hoverBackground#000000
statusBarItem.prominentBackground#000000
statusBarItem.prominentForeground#BC8F8F
statusBarItem.prominentHoverBackground#000000
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#BC8F8F
symbolIcon.arrayForeground#BC8F8F
symbolIcon.booleanForeground#BC8F8F
symbolIcon.classForeground#BC8F8F
symbolIcon.colorForeground#BC8F8F
symbolIcon.constantForeground#BC8F8F
symbolIcon.constructorForeground#BC8F8F
symbolIcon.enumeratorForeground#BC8F8F
symbolIcon.enumeratorMemberForeground#BC8F8F
symbolIcon.eventForeground#BC8F8F
symbolIcon.fieldForeground#BC8F8F
symbolIcon.fileForeground#BC8F8F
symbolIcon.folderForeground#BC8F8F
symbolIcon.functionForeground#BC8F8F
symbolIcon.interfaceForeground#BC8F8F
symbolIcon.keyForeground#BC8F8F
symbolIcon.keywordForeground#BC8F8F
symbolIcon.methodForeground#BC8F8F
symbolIcon.moduleForeground#BC8F8F
symbolIcon.namespaceForeground#BC8F8F
symbolIcon.nullForeground#BC8F8F
symbolIcon.numberForeground#BC8F8F
symbolIcon.objectForeground#BC8F8F
symbolIcon.operatorForeground#BC8F8F
symbolIcon.packageForeground#BC8F8F
symbolIcon.propertyForeground#BC8F8F
symbolIcon.referenceForeground#BC8F8F
symbolIcon.snippetForeground#BC8F8F
symbolIcon.stringForeground#BC8F8F
symbolIcon.structForeground#BC8F8F
symbolIcon.textForeground#BC8F8F
symbolIcon.typeParameterForeground#BC8F8F
symbolIcon.unitForeground#BC8F8F
symbolIcon.variableForeground#BC8F8F
tab.activeBackground#BC8F8F33
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#BC8F8F
tab.activeModifiedBorder#BC8F8F88
tab.border#000000
tab.hoverBackground#BC8F8F33
tab.hoverBorder#BC8F8F88
tab.hoverForeground#BC8F8F88
tab.inactiveBackground#000000
tab.inactiveForeground#BC8F8F88
tab.inactiveModifiedBorder#000000
tab.unfocusedActiveBackground#BC8F8F33
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#000000
tab.unfocusedActiveForeground#BC8F8F
tab.unfocusedActiveModifiedBorder#000000
tab.unfocusedHoverBackground#BC8F8F33
tab.unfocusedHoverBorder#000000
tab.unfocusedHoverForeground#BC8F8F33
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#BC8F8F88
tab.unfocusedInactiveModifiedBorder#000000
terminal.ansiBlack#bc8f8fff
terminal.ansiBlue#af8585ff
terminal.ansiBrightBlack#bc8f8fff
terminal.ansiBrightBlue#af8585ff
terminal.ansiBrightCyan#7d5f5fff
terminal.ansiBrightGreen#967272ff
terminal.ansiBrightMagenta#a37c7cff
terminal.ansiBrightRed#8a6969ff
terminal.ansiBrightWhite#644c4cff
terminal.ansiBrightYellow#715656ff
terminal.ansiCyan#7d5f5fff
terminal.ansiGreen#967272ff
terminal.ansiMagenta#a37c7cff
terminal.ansiRed#8a6969ff
terminal.ansiWhite#644c4cff
terminal.ansiYellow#715656ff
terminal.background#000000
terminal.border#BC8F8F88
terminal.foreground#BC8F8F
terminal.selectionBackground#BC8F8F33
terminalCursor.background#000000
terminalCursor.foreground#BC8F8F
textBlockQuote.background#000000
textBlockQuote.border#BC8F8F88
textCodeBlock.background#000000
textLink.activeForeground#BC8F8F
textLink.foreground#BC8F8F88
textPreformat.foreground#BC8F8F
textSeparator.foreground#BC8F8F
titleBar.activeBackground#000000
titleBar.activeForeground#BC8F8F
titleBar.border#BC8F8F88
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#BC8F8F
tree.indentGuidesStroke#BC8F8F88
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.buttonBackground#000000
welcomePage.buttonHoverBackground#000000
widget.shadow#BC8F8F33
window.activeBorder#BC8F8F88
window.inactiveBorder#BC8F8F33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BC8F8F88	—
keyword, storage	#BC8F8F88	—
entity, strong	—	bold
invalid	#BC8F8F88	italic underline

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