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_Silver

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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