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_MediumSlateBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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