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_Blue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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