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_Purple

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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