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.

Open in VS Code GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_PapayaWhip

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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