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_LightPink

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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