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_AliceBlue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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