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_LightGray

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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