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_MediumPurple

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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