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_MediumOrchid

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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