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_DeepPink

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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