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_LightSeaGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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