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_Lavender

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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