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_Brown

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#b4595988	—
keyword, storage	#b4595988	—
entity, strong	—	bold
invalid	#b4595988	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}!`;
}