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_PaleGreen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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