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_Beige

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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