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_Linen

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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