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_SeaShell

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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