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_MediumSpringGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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