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_LightGoldenRodYellow

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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