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.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

OhLED Themes (142-in-1) — OhLED_Salmon

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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