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_RebeccaPurple

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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