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_LightBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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