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_Olive

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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