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_DarkOrchid

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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