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_IndianRed

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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