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_LightSkyBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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