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_Gray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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