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_HotPink

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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