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_LightSlateGray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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