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_Ivory

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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