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_SkyBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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