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_PaleTurquoise

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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