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_Red

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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