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.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

OhLED Themes (142-in-1) — OhLED_DarkMagenta

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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