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_Violet

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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