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_Plum

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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