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.

Open in VS Code GitHub

Color themes

VS Code preview

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

OhLED Themes (142-in-1) — OhLED_PaleVioletRed

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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