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_LightCoral

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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