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_Bisque

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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